diff --git a/.env b/.env
index 397bc480d8..c962755817 100644
--- a/.env
+++ b/.env
@@ -9,7 +9,7 @@ SENTRY_PROJECT=""
 SENTRY_AUTH_TOKEN=""
 
 # App name displayed as Title
-VITE_APP_NAME="Fractal"
+VITE_APP_NAME="Decent"
 
 # Alchemy provider API key, used on Mainnet
 VITE_APP_ALCHEMY_MAINNET_API_KEY=""
@@ -49,7 +49,7 @@ VITE_APP_SENTRY_DSN_URL=""
 VITE_APP_SHUTTER_EON_PUBKEY=0x0e6493bbb4ee8b19aa9b70367685049ff01dc9382c46aed83f8bc07d2a5ba3e6030bd83b942c1fd3dff5b79bef3b40bf6b666e51e7f0be14ed62daaffad47435265f5c9403b1a801921981f7d8659a9bd91fe92fb1cf9afdb16178a532adfaf51a237103874bb03afafe9cab2118dae1be5f08a0a28bf488c1581e9db4bc23ca
 
 # index.html and WalletConnect metadata
-VITE_APP_SITE_URL="https://app.dev.fractalframework.xyz"
+VITE_APP_SITE_URL="https://app.dev.decentdao.org"
 
 # WalletConnect Cloud Project ID
 VITE_APP_WALLET_CONNECT_PROJECT_ID=""
diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
index fe654804d2..ea5dbfc33e 100644
--- a/.github/CODE_OF_CONDUCT.md
+++ b/.github/CODE_OF_CONDUCT.md
@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-https://chat.decent-dao.org.
+https://chat.decentdao.org.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 73b6e3e6dc..f46d235fb6 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -1,28 +1,28 @@
-## Contributing to Fractal Interface
+## Contributing to Decent Interface
 
 ### Submitting an Issue
 
 - Some issues may already be reported, please search existing issues before submitting a new one.
 
-- If this is a potential security vulnerability in Fractal, please see our [Security Policy](https://github.com/decent-dao/fractal-interface/blob/HEAD/.github/SECURITY.md) for instructions on privately reporting to our security team.
+- If this is a potential security vulnerability in Decent, please see our [Security Policy](https://github.com/decentdao/decent-interface/blob/HEAD/.github/SECURITY.md) for instructions on privately reporting to our security team.
 
-- Otherwise, simply create a new issue and the Fractal development team will respond in a timely manner. Please be as descriptive of the issue as possible.
+- Otherwise, simply create a new issue and the Decent development team will respond in a timely manner. Please be as descriptive of the issue as possible.
 
 - If looking to contribute a bug fix or feature, please discuss the change via the bug ticket or a new Github issue before submitting a pull request for the greatest likelihood of being accepted.
 
 ### Submitting a Pull Request
 
-- Follow our [README](https://github.com/decent-dao/fractal-interface/blob/HEAD/README.md) for instructions on setting up your local environment.
+- Follow our [README](https://github.com/decentdao/decent-interface/blob/HEAD/README.md) for instructions on setting up your local environment.
 
 - Open a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) with your proposed changes.
 
 - Include a link to the relevant GitHub Issue in your description.
 
 - If possible, please provide unit or integration tests for your changes. You can see example
-  automation tests in the [test directory](https://github.com/decent-dao/fractal-interface/tree/HEAD/tests).
+  automation tests in the [test directory](https://github.com/decentdao/decent-interface/tree/HEAD/tests).
 - All of your components should be composed of [Chakra UI](https://chakra-ui.com/) base components, using our custom theme.
 
-- A member of the Fractal engineering team will respond with any further discussion or requested changes and once approved
+- A member of the Decent engineering team will respond with any further discussion or requested changes and once approved
   you are free to merge.
 - We appreciate the collaboration!
 
diff --git a/.github/SECURITY.md b/.github/SECURITY.md
index 3bf9e5d8b5..1ae88a26d1 100644
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -1,12 +1,12 @@
 # Security Policy
 
-We at Fractal encourage security researchers to contact us directly and privately to report any potential security vulnerabilities in either our smart contracts or front end code.
+We at Decent encourage security researchers to contact us directly and privately to report any potential security vulnerabilities in either our smart contracts or front end code.
 
-If the issue you are reporting is not a security vulnerability, simply [open a new GitHub issue](https://github.com/decent-dao/fractal-interface/issues/new/choose).
+If the issue you are reporting is not a security vulnerability, simply [open a new GitHub issue](https://github.com/decentdao/decent-interface/issues/new/choose).
 
 ## Reporting a Vulnerability
 
-If you would like to disclose a vulnerability in Fractal, please send a new email to [security@decent-dao.org](mailto:security@decent-dao.org).
+If you would like to disclose a vulnerability in Decent, please send a new email to [security@decentdao.org](mailto:security@decentdao.org).
 
 Please include the following information in your email:
 
@@ -19,4 +19,4 @@ Please include the following information in your email:
 
 If you prefer secure communication, please use the following GPG key:
 
-https://keys.openpgp.org/search?q=security%40decent-dao.org
+https://keys.openpgp.org/search?q=security%40decentdao.org
diff --git a/.graphclientrc.yml b/.graphclientrc.yml
index 437646d2ae..6d40fcdfef 100644
--- a/.graphclientrc.yml
+++ b/.graphclientrc.yml
@@ -1,5 +1,5 @@
 sources:
-  - name: fractal
+  - name: decent
     handler:
       graphql:
         endpoint: https://api.studio.thegraph.com/query/{context.subgraphSpace:71032}/{context.subgraphSlug:fractal-mainnet}/{context.subgraphVersion:v0.0.2}
diff --git a/LICENSE b/LICENSE
index ce8a0d3422..13d1d79e1c 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 fractal-framework
+Copyright (c) 2024 decent
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index c7bcdcc4cf..26c3e6d371 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Fractal Interface
+# Decent Interface
 
 ## Local Development
 
@@ -41,8 +41,6 @@ The "dev" environment tracks the `develop` branch, "staging" tracks `staging`, a
 So at any given time, there are effectively three builds out there, and they are publicly accessible and privately configurable within Github:
 
 1. dev site
-   - url: https://app.dev.fractalframework.xyz
-2. staging site
-   - url: https://app.staging.fractalframework.xyz
-3. prod site
-   - url: https://app.fractalframework.xyz
+   - url: https://app.dev.decentdao.org
+2. prod site
+   - url: https://app.decentdao.org
diff --git a/docs/TRANSLATIONS.md b/docs/TRANSLATIONS.md
index 855fb2067d..ac3ee4ac96 100644
--- a/docs/TRANSLATIONS.md
+++ b/docs/TRANSLATIONS.md
@@ -2,7 +2,7 @@
 
 ### Submitting Language Translations
 
-- Languages we are actively seeking translations for will appear as a [Github Issue](https://github.com/decent-dao/fractal-interface/labels/translation), though we always appreciate other
+- Languages we are actively seeking translations for will appear as a [Github Issue](https://github.com/decentdao/decent-interface/labels/translation), though we always appreciate other
   submissions. If we don't currently support your language, please help us out!
 
 - Run the `1_json_to_csv.py` [Python 3](https://www.python.org/downloads/) script with your [2 character ISO language code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) to get a helpful CSV file of missing strings in your language:
@@ -13,7 +13,7 @@
 
 - Add your translations in the last column of the output CSV file. Feel free to improve existing translations!
 
-- When finished translating, run `2_csv_to_json.py` to generate the required `.json` files for the Fractal app:
+- When finished translating, run `2_csv_to_json.py` to generate the required `.json` files for the Decent app:
 
   ```console
   python3 2_csv_to_json.py
@@ -21,11 +21,11 @@
 
 - Submit a pull request with these changes, as detailed in [CONTRIBUTING.md](../.github/CONTRIBUTING.md).
 
-- We encourage anyone to try cloning the Fractal repo and submitting a PR with translations (you can definitely do it!), however if you get stuck the Fractal team can provide you with a CSV to edit and return to us, simply add your request to the related Github issue.
+- We encourage anyone to try cloning the Decent repo and submitting a PR with translations (you can definitely do it!), however if you get stuck the Decent team can provide you with a CSV to edit and return to us, simply add your request to the related Github issue.
 
 ### Translation Guidelines
 
-- The app name is Fractal, which is a project of Decent DAO. Unless used as their non product specific meanings (e.g. John is a decent fellow who loves fractals.), these words should not be translated.
+- The app name is Decent, which is a project of Decent DAO. Unless used as their non product specific meanings (e.g. John is a decent fellow who loves decent projects.), these words should not be translated.
 
 - Content within curly brackets (e.g. `{{count}}`), indicates a variable that is replaced within the app logic, and neither the brackets, nor the content within should be altered. _You may place these bracketed variables anywhere in your translation text_.
 
diff --git a/index.html b/index.html
index f77068492c..18c544ea12 100644
--- a/index.html
+++ b/index.html
@@ -3,33 +3,101 @@
   <head>
     <meta charset="utf-8" />
     <link
-      rel="icon"
-      href="/favicon.ico"
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="/apple-icon-57x57.png"
     />
-
-    <meta
-      name="theme-color"
-      content="#181716"
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="/apple-icon-60x60.png"
     />
-    <meta
-      name="description"
-      content="Are you outgrowing your Multisig? Fractal extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance."
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="/apple-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="/apple-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/apple-icon-144x144.png"
     />
     <link
       rel="apple-touch-icon"
-      href="/images/logo192.png"
+      sizes="152x152"
+      href="/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/android-icon-192x192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon-16x16.png"
     />
     <link
       rel="manifest"
       href="/manifest.json"
     />
+    <meta
+      name="msapplication-TileColor"
+      content="#200828"
+    />
+    <meta
+      name="msapplication-TileImage"
+      content="/ms-icon-144x144.png"
+    />
+    <meta
+      name="theme-color"
+      content="#200828"
+    />
+    <meta
+      name="description"
+      content="Are you outgrowing your Multisig? Decent extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance."
+    />
     <meta
       property="og:url"
       content="%VITE_APP_SITE_URL%"
     />
     <meta
       property="og:description"
-      content="Are you outgrowing your Multisig? Fractal extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance."
+      content="Are you outgrowing your Multisig? Decent extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance."
     />
     <meta
       property="og:type"
@@ -57,6 +125,14 @@
     />
     <title>%VITE_APP_NAME%</title>
   </head>
+  <style>
+    @font-face {
+      font-family: 'TT Firs Neue Variable';
+      src:
+        url('/fonts/TT_Firs_Neue_Variable.woff') format('woff'),
+        url('/fonts/TT_Firs_Neue_Variable.woff2') format('woff2');
+    }
+  </style>
   <body>
     <div id="root"></div>
     <script
diff --git a/package-lock.json b/package-lock.json
index 4a2d868cf8..56b95ce807 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,40 +1,40 @@
 {
-  "name": "fractal-interface",
+  "name": "decent-interface",
   "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "fractal-interface",
+      "name": "decent-interface",
       "version": "0.1.2",
       "hasInstallScript": true,
       "dependencies": {
         "@adraffy/ens-normalize": "^1.10.1",
         "@apollo/client": "^3.7.10",
         "@chakra-ui/react": "^2.8.2",
-        "@decent-org/fractal-ui": "^0.1.25",
+        "@decent-org/fractal-ui": "^0.3.1",
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.6",
         "@ethersproject/abstract-signer": "^5.7.0",
         "@ethersproject/providers": "^5.7.2",
-        "@fontsource/ibm-plex-mono": "^4.5.12",
-        "@fontsource/ibm-plex-sans": "^4.5.13",
+        "@fontsource/space-mono": "^5.0.19",
         "@fractal-framework/fractal-contracts": "^0.7.0",
         "@graphprotocol/client-apollo": "^1.0.16",
         "@lido-sdk/contracts": "^3.0.2",
         "@netlify/blobs": "^6.5.0",
         "@netlify/functions": "^2.6.0",
+        "@phosphor-icons/react": "^2.1.4",
         "@safe-global/safe-deployments": "^1.34.0",
         "@safe-global/safe-ethers-lib": "^1.9.2",
         "@safe-global/safe-service-client": "^1.5.2",
         "@sentry/react": "^7.112.2",
         "@shutter-network/shutter-crypto": "^1.0.1",
         "@snapshot-labs/snapshot.js": "^0.7.3",
-        "@tanstack/react-query": "^5.28.4",
-        "@ukstv/jazzicon-react": "^1.0.0",
+        "@tanstack/react-query": "^5.36.2",
         "@vitejs/plugin-react-swc": "^3.5.0",
-        "@web3modal/wagmi": "^4.1.1",
+        "@web3modal/wagmi": "^4.2.1",
         "axios": "^0.27.2",
+        "blo": "^1.2.0",
         "classnames": "^2.3.1",
         "date-fns": "^2.29.3",
         "date-fns-tz": "^2.0.1",
@@ -55,11 +55,10 @@
         "react-router-dom": "^6.22.0",
         "react-toastify": "^9.0.8",
         "remark-gfm": "^4.0.0",
-        "viem": "^2.8.12",
+        "viem": "^2.10.9",
         "vite": "^5.1.0",
         "vite-plugin-checker": "^0.6.4",
-        "vite-plugin-node-polyfills": "^0.21.0",
-        "wagmi": "^2.5.11",
+        "wagmi": "^2.9.0",
         "yup": "^1"
       },
       "devDependencies": {
@@ -3429,11 +3428,12 @@
       }
     },
     "node_modules/@decent-org/fractal-ui": {
-      "version": "0.1.25",
-      "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.1.25.tgz",
-      "integrity": "sha512-mWIpaQ+HlXAskE5tSUaWcETyDHz/skq68FFF5O7jK4vJQAk7Ko7bIf+iujhY5DnAwg44v9+Nrad/zu3j6uNbgA==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@decent-org/fractal-ui/-/fractal-ui-0.3.1.tgz",
+      "integrity": "sha512-TMKY2BSueb6vmNzN1HbcIoVHDcbjIKU6VWV1W38JTWmAmCB4uRHJiGpwUDMJzktEu4cW0FyYT8qHuMRCALb2FQ==",
       "peerDependencies": {
         "@chakra-ui/react": "^2.3.4",
+        "@phosphor-icons/react": "^2.1.4",
         "react": "^16 || ^17 || ^18",
         "react-dom": "^16 || ^17 || ^18"
       }
@@ -4907,15 +4907,10 @@
         "@ethersproject/strings": "^5.7.0"
       }
     },
-    "node_modules/@fontsource/ibm-plex-mono": {
-      "version": "4.5.12",
-      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-4.5.12.tgz",
-      "integrity": "sha512-ysF4GfudxLgDnpycjzrHFKqsEMOYHt0IUJN6dRECg6YLvVggLMj/SPh+w0QWjdgXkIbjqIbcho0O5mNcLCJMiQ=="
-    },
-    "node_modules/@fontsource/ibm-plex-sans": {
-      "version": "4.5.13",
-      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans/-/ibm-plex-sans-4.5.13.tgz",
-      "integrity": "sha512-7oDAqvuIArnMJck/JBqCnQZwqL4za+5xG+1Gu4enYbGcGqmUPktiuOy1i0N3XrzrNO70ZvsSt1Rdkxr2oemE6Q=="
+    "node_modules/@fontsource/space-mono": {
+      "version": "5.0.19",
+      "resolved": "https://registry.npmjs.org/@fontsource/space-mono/-/space-mono-5.0.19.tgz",
+      "integrity": "sha512-gz9yaKtXCY+HutNvQ4APc15xwZ1f6pWXve5N55x5m/hOoGqgB9Auf3l7CitHNhNJkSKEmaM45M29b0rFeudXlg=="
     },
     "node_modules/@fractal-framework/fractal-contracts": {
       "version": "0.7.0",
@@ -8351,6 +8346,7 @@
       "version": "0.14.3",
       "resolved": "https://registry.npmjs.org/@metamask/sdk/-/sdk-0.14.3.tgz",
       "integrity": "sha512-BYLs//nY2wioVSih78gOQI6sLIYY3vWkwVqXGYUgkBV+bi49bv+9S0m+hZ2cwiRaxfMYtKs0KvhAQ8weiYwDrg==",
+      "peer": true,
       "dependencies": {
         "@metamask/onboarding": "^1.0.1",
         "@metamask/post-message-stream": "^6.1.0",
@@ -8395,6 +8391,7 @@
       "version": "0.14.3",
       "resolved": "https://registry.npmjs.org/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.14.3.tgz",
       "integrity": "sha512-yjSbj8y7fFbQXv2HBzUX6D9C8BimkCYP6BDV7hdw53W8b/GlYCtXVxUFajQ9tuO1xPTRjR/xt/dkdr2aCi6WGw==",
+      "peer": true,
       "dependencies": {
         "bufferutil": "^4.0.8",
         "cross-fetch": "^3.1.5",
@@ -8411,6 +8408,7 @@
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.3.tgz",
       "integrity": "sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==",
       "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -8458,6 +8456,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
       "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "peer": true,
       "dependencies": {
         "node-fetch": "^2.6.12"
       }
@@ -8480,6 +8479,7 @@
           "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
         }
       ],
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.20.6"
       }
@@ -8488,6 +8488,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz",
       "integrity": "sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -8495,12 +8496,14 @@
     "node_modules/@metamask/sdk/node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "peer": true
     },
     "node_modules/@metamask/sdk/node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
       "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "peer": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -8514,12 +8517,14 @@
     "node_modules/@metamask/sdk/node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "peer": true
     },
     "node_modules/@metamask/sdk/node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
       }
@@ -9481,6 +9486,18 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.4.tgz",
+      "integrity": "sha512-EeNwgcg1aeK5vG/JYVTullnZzk5zjftOrjLb1iYetyhn5ImFFREc+xG0FAB/dAY277DGDSF8pNdNbqG1SUKIxQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -9940,58 +9957,6 @@
       "resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz",
       "integrity": "sha512-AW8PKd6iX3vAZ0vA43nOUOnbq/X5ihgU+mSXXqunMkeQADGiqw/PY0JNeYtD5sr0PAy51YPgAPbDoeapv9r8WA=="
     },
-    "node_modules/@rollup/plugin-inject": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
-      "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
-      "dependencies": {
-        "@rollup/pluginutils": "^5.0.1",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@rollup/plugin-inject/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-    },
-    "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^2.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.10.0.tgz",
@@ -10148,6 +10113,15 @@
         "win32"
       ]
     },
+    "node_modules/@safe-global/safe-apps-provider": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.1.tgz",
+      "integrity": "sha512-V4a05A3EgJcriqtDoJklDz1BOinWhC6P0hjUSxshA4KOZM7rGPCTto/usXs09zr1vvL28evl/NldSTv97j2bmg==",
+      "dependencies": {
+        "@safe-global/safe-apps-sdk": "^8.1.0",
+        "events": "^3.3.0"
+      }
+    },
     "node_modules/@safe-global/safe-apps-sdk": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-sdk/-/safe-apps-sdk-8.1.0.tgz",
@@ -11077,20 +11051,20 @@
       "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw=="
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.28.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.4.tgz",
-      "integrity": "sha512-uQZqOFqLWUvXNIQZ63XdKzg22NtHzgCBUfDmjDHi3BoF+nUYeBNvMi/xFPtFrMhqRzG2Ir4mYaGsWZzmiEjXpA==",
+      "version": "5.36.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.1.tgz",
+      "integrity": "sha512-BteWYEPUcucEu3NBcDAgKuI4U25R9aPrHSP6YSf2NvaD2pSlIQTdqOfLRsxH9WdRYg7k0Uom35Uacb6nvbIMJg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.28.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.4.tgz",
-      "integrity": "sha512-BErcoB/QQG6YwLSUKnaGxF+lSc270RH2w3kMBpG0i4YzDCsFs2pdxPX1WVknQvFk9bNgukMb158hc2Zb4SdwSA==",
+      "version": "5.36.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.36.2.tgz",
+      "integrity": "sha512-bHNa+5dead+j6SA8WVlEOPxcGfteVFgdyFTCFcxBgjnPf0fFpHUc7aNZBCnvmPXqy/BeQa9zTuU9ectb7i8ZXA==",
       "dependencies": {
-        "@tanstack/query-core": "5.28.4"
+        "@tanstack/query-core": "5.36.1"
       },
       "funding": {
         "type": "github",
@@ -11775,21 +11749,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@ukstv/jazzicon-react": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@ukstv/jazzicon-react/-/jazzicon-react-1.0.0.tgz",
-      "integrity": "sha512-V0klHdrO8Mk+faTGhQRd4t2vR+1IUHJa9sLaP/vhed0klPrOblhEU/Mc+Utgxep6oUuyhcGigjvkEJUOVE1/sg==",
-      "dependencies": {
-        "color": "^3.1.2",
-        "mersenne-twister": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16"
-      }
-    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -12086,110 +12045,11 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
-      "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
-      "dependencies": {
-        "@babel/parser": "^7.23.9",
-        "@vue/shared": "3.4.21",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
-      }
-    },
-    "node_modules/@vue/compiler-core/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-    },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
-      "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
-      "dependencies": {
-        "@vue/compiler-core": "3.4.21",
-        "@vue/shared": "3.4.21"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
-      "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
-      "dependencies": {
-        "@babel/parser": "^7.23.9",
-        "@vue/compiler-core": "3.4.21",
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/compiler-ssr": "3.4.21",
-        "@vue/shared": "3.4.21",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.7",
-        "postcss": "^8.4.35",
-        "source-map-js": "^1.0.2"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-    },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
-      "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
-      "dependencies": {
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/shared": "3.4.21"
-      }
-    },
-    "node_modules/@vue/reactivity": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
-      "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
-      "dependencies": {
-        "@vue/shared": "3.4.21"
-      }
-    },
-    "node_modules/@vue/runtime-core": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
-      "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
-      "dependencies": {
-        "@vue/reactivity": "3.4.21",
-        "@vue/shared": "3.4.21"
-      }
-    },
-    "node_modules/@vue/runtime-dom": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
-      "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
-      "dependencies": {
-        "@vue/runtime-core": "3.4.21",
-        "@vue/shared": "3.4.21",
-        "csstype": "^3.1.3"
-      }
-    },
-    "node_modules/@vue/server-renderer": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
-      "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
-      "dependencies": {
-        "@vue/compiler-ssr": "3.4.21",
-        "@vue/shared": "3.4.21"
-      },
-      "peerDependencies": {
-        "vue": "3.4.21"
-      }
-    },
-    "node_modules/@vue/shared": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
-      "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
-    },
     "node_modules/@wagmi/connectors": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/@wagmi/connectors/-/connectors-4.1.18.tgz",
       "integrity": "sha512-K/iLH/Z8jwvgPAYESU/uCQtQBvcIR1Jrqk+t2uCDSxew/tYtkOo2yOjtaPuOb+xJ5OrMGg+0tVHhGChYXry9Ow==",
+      "peer": true,
       "dependencies": {
         "@coinbase/wallet-sdk": "3.9.1",
         "@metamask/sdk": "0.14.3",
@@ -12212,19 +12072,11 @@
         }
       }
     },
-    "node_modules/@wagmi/connectors/node_modules/@safe-global/safe-apps-provider": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/@safe-global/safe-apps-provider/-/safe-apps-provider-0.18.1.tgz",
-      "integrity": "sha512-V4a05A3EgJcriqtDoJklDz1BOinWhC6P0hjUSxshA4KOZM7rGPCTto/usXs09zr1vvL28evl/NldSTv97j2bmg==",
-      "dependencies": {
-        "@safe-global/safe-apps-sdk": "^8.1.0",
-        "events": "^3.3.0"
-      }
-    },
     "node_modules/@wagmi/core": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.6.9.tgz",
       "integrity": "sha512-AbNbHK+m60mfMTds0flv5YYJGp+JSz8O8ikzX+T7MdemFrYA9tZr6G+iSEnf+JLtcgiaCgQqUwac/WmmTkDiMA==",
+      "peer": true,
       "dependencies": {
         "eventemitter3": "5.0.1",
         "mipd": "0.0.5",
@@ -12247,37 +12099,11 @@
         }
       }
     },
-    "node_modules/@wagmi/core/node_modules/zustand": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.1.tgz",
-      "integrity": "sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==",
-      "dependencies": {
-        "use-sync-external-store": "1.2.0"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@walletconnect/core": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.11.2.tgz",
       "integrity": "sha512-bB4SiXX8hX3/hyBfVPC5gwZCXCl+OPj+/EDVM71iAO3TDsh78KPbrVAbDnnsbHzZVHlsMohtXX3j5XVsheN3+g==",
+      "peer": true,
       "dependencies": {
         "@walletconnect/heartbeat": "1.2.1",
         "@walletconnect/jsonrpc-provider": "1.0.13",
@@ -12315,6 +12141,7 @@
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/ethereum-provider/-/ethereum-provider-2.11.2.tgz",
       "integrity": "sha512-BUDqee0Uy2rCZVkW5Ao3q6Ado/3fePYnFdryVF+YL6bPhj+xQZ5OfKodl+uvs7Rwq++O5wTX2RqOTzpW7+v+Mg==",
+      "peer": true,
       "dependencies": {
         "@walletconnect/jsonrpc-http-connection": "^1.0.7",
         "@walletconnect/jsonrpc-provider": "^1.0.13",
@@ -12358,21 +12185,16 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/@walletconnect/jsonrpc-http-connection": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.7.tgz",
-      "integrity": "sha512-qlfh8fCfu8LOM9JRR9KE0s0wxP6ZG9/Jom8M0qsoIQeKF3Ni0FyV4V1qy/cc7nfI46SLQLSl4tgWSfLiE1swyQ==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.8.tgz",
+      "integrity": "sha512-+B7cRuaxijLeFDJUq5hAzNyef3e3tBDIxyaCNmFtjwnod5AGis3RToNqzFU33vpVcxFhofkpE7Cx+5MYejbMGw==",
       "dependencies": {
         "@walletconnect/jsonrpc-utils": "^1.0.6",
         "@walletconnect/safe-json": "^1.0.1",
         "cross-fetch": "^3.1.4",
-        "tslib": "1.14.1"
+        "events": "^3.3.0"
       }
     },
-    "node_modules/@walletconnect/jsonrpc-http-connection/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/@walletconnect/jsonrpc-provider": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.13.tgz",
@@ -12447,19 +12269,14 @@
       }
     },
     "node_modules/@walletconnect/logger": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-2.0.1.tgz",
-      "integrity": "sha512-SsTKdsgWm+oDTBeNE/zHxxr5eJfZmE9/5yp/Ku+zJtcTAjELb3DXueWkDXmE9h8uHIbJzIb5wj5lPdzyrjT6hQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@walletconnect/logger/-/logger-2.1.2.tgz",
+      "integrity": "sha512-aAb28I3S6pYXZHQm5ESB+V6rDqIYfsnHaQyzFbwUUBFY4H0OXx/YtTl8lvhUNhMMfb9UxbwEBS253TlXUYJWSw==",
       "dependencies": {
-        "pino": "7.11.0",
-        "tslib": "1.14.1"
+        "@walletconnect/safe-json": "^1.0.2",
+        "pino": "7.11.0"
       }
     },
-    "node_modules/@walletconnect/logger/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/@walletconnect/modal": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/modal/-/modal-2.6.2.tgz",
@@ -12489,19 +12306,13 @@
       }
     },
     "node_modules/@walletconnect/relay-api": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@walletconnect/relay-api/-/relay-api-1.0.9.tgz",
-      "integrity": "sha512-Q3+rylJOqRkO1D9Su0DPE3mmznbAalYapJ9qmzDgK28mYF9alcP3UwG/og5V7l7CFOqzCLi7B8BvcBUrpDj0Rg==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@walletconnect/relay-api/-/relay-api-1.0.10.tgz",
+      "integrity": "sha512-tqrdd4zU9VBNqUaXXQASaexklv6A54yEyQQEXYOCr+Jz8Ket0dmPBDyg19LVSNUN2cipAghQc45/KVmfFJ0cYw==",
       "dependencies": {
-        "@walletconnect/jsonrpc-types": "^1.0.2",
-        "tslib": "1.14.1"
+        "@walletconnect/jsonrpc-types": "^1.0.2"
       }
     },
-    "node_modules/@walletconnect/relay-api/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/@walletconnect/relay-auth": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@walletconnect/relay-auth/-/relay-auth-1.0.4.tgz",
@@ -12537,6 +12348,7 @@
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.11.2.tgz",
       "integrity": "sha512-MfBcuSz2GmMH+P7MrCP46mVE5qhP0ZyWA0FyIH6/WuxQ6G+MgKsGfaITqakpRPsykWOJq8tXMs3XvUPDU413OQ==",
+      "peer": true,
       "dependencies": {
         "@walletconnect/core": "2.11.2",
         "@walletconnect/events": "^1.0.1",
@@ -12566,6 +12378,7 @@
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.11.2.tgz",
       "integrity": "sha512-p632MFB+lJbip2cvtXPBQslpUdiw1sDtQ5y855bOlAGquay+6fZ4h1DcDePeKQDQM3P77ax2a9aNPZxV6y/h1Q==",
+      "peer": true,
       "dependencies": {
         "@walletconnect/events": "^1.0.1",
         "@walletconnect/heartbeat": "1.2.1",
@@ -12579,6 +12392,7 @@
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.11.2.tgz",
       "integrity": "sha512-cNtIn5AVoDxKAJ4PmB8m5adnf5mYQMUamEUPKMVvOPscfGtIMQEh9peKsh2AN5xcRVDbgluC01Id545evFyymw==",
+      "peer": true,
       "dependencies": {
         "@walletconnect/jsonrpc-http-connection": "^1.0.7",
         "@walletconnect/jsonrpc-provider": "1.0.13",
@@ -12595,6 +12409,7 @@
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.11.2.tgz",
       "integrity": "sha512-LyfdmrnZY6dWqlF4eDrx5jpUwsB2bEPjoqR5Z6rXPiHJKUOdJt7az+mNOn5KTSOlRpd1DmozrBrWr+G9fFLYVw==",
+      "peer": true,
       "dependencies": {
         "@stablelib/chacha20poly1305": "1.0.1",
         "@stablelib/hkdf": "1.0.1",
@@ -12640,10 +12455,11 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/@web3modal/common": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/common/-/common-4.1.1.tgz",
-      "integrity": "sha512-InaJY+PfjtcT4ewySMDTCON2jGuk5kKVuleIz04BWNU92Gm2S4hU7knLhIzPshpyv31Hv3/kO2NFhaxx3CLD+w==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/common/-/common-4.2.1.tgz",
+      "integrity": "sha512-RSx+MKCTr9x8ACTBSIren30goFqkAiplMe4098VNYsYriDjIRyz0mtE8JcM/padrqM+Xvc61xgVx81O15H5drQ==",
       "dependencies": {
+        "bignumber.js": "9.1.2",
         "dayjs": "1.11.10"
       }
     },
@@ -12653,77 +12469,80 @@
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/@web3modal/core": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/core/-/core-4.1.1.tgz",
-      "integrity": "sha512-+FT73nYHKqF0VlkB9lo6mvfR/WjB4dz24JPwKb2Vq05JVyOcnbt5S06IeTtjI7zgKv3MyKzDzxh6z1ScgbTaRA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-2Meod0xYxwtnaq6fzZXZOFat2+KhPO/N3y8TBZmN2Xl5DF7/jY/KCFP6/MLdhBEcKXxU5umm3tZ0ASAF7dFzrA==",
       "dependencies": {
-        "@web3modal/common": "4.1.1",
-        "@web3modal/wallet": "4.1.1",
+        "@web3modal/common": "4.2.1",
+        "@web3modal/wallet": "4.2.1",
         "valtio": "1.11.2"
       }
     },
     "node_modules/@web3modal/polyfills": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/polyfills/-/polyfills-4.1.1.tgz",
-      "integrity": "sha512-HQ90relyjjLfTj5XJhhDV9l3Mp10Rvv/MN+GCvzEx/xY7Tz4yhmKZUX3c519pz2BeVYjea+xwwu6OoOwd3GAXQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/polyfills/-/polyfills-4.2.1.tgz",
+      "integrity": "sha512-ejt4Z1kDILTl1h1SjCQbfp69QG5N8eHert0m6uJnjnRedQkGYBN92qzAKDCcGjScZDfH4HOAFznFoNpTJChvrg==",
       "dependencies": {
         "buffer": "6.0.3"
       }
     },
     "node_modules/@web3modal/scaffold": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/scaffold/-/scaffold-4.1.1.tgz",
-      "integrity": "sha512-GBryCiyl+taz5DPq0expxzfMVcrpKjWvEBSAqT1tPUSthnzOWnVF77XlUAYgFZqzPsEu9lQ1dHCdqZx7WWMCXA==",
-      "dependencies": {
-        "@web3modal/common": "4.1.1",
-        "@web3modal/core": "4.1.1",
-        "@web3modal/ui": "4.1.1",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/scaffold/-/scaffold-4.2.1.tgz",
+      "integrity": "sha512-onSjmPu1iTHJdQzVcBiad6MIwey04x5NnGBlz4BZgGcpsvpumNU+I41ELbCqD3+5qEGXGcTncFL6rxBnF/ZqXw==",
+      "dependencies": {
+        "@web3modal/common": "4.2.1",
+        "@web3modal/core": "4.2.1",
+        "@web3modal/siwe": "4.2.1",
+        "@web3modal/ui": "4.2.1",
+        "@web3modal/wallet": "4.2.1",
         "lit": "3.1.0"
-      },
-      "optionalDependencies": {
-        "@web3modal/siwe": "4.1.1"
-      },
-      "peerDependencies": {
-        "@web3modal/siwe": "4.1.1",
-        "@web3modal/wallet": "4.1.1"
-      },
-      "peerDependenciesMeta": {
-        "@web3modal/siwe": {
-          "optional": true
-        }
       }
     },
     "node_modules/@web3modal/scaffold-react": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/scaffold-react/-/scaffold-react-4.1.1.tgz",
-      "integrity": "sha512-g+iVswup3MRlDTnwJoIayLDVhFyCVTNTfVaEYaxvr8ADKNb90t3nzY742ZVQOdYitvrWrAMboVaOB6LuLCvrsA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/scaffold-react/-/scaffold-react-4.2.1.tgz",
+      "integrity": "sha512-z21kMB2GTeLFqwXQdJsgJHEGiCPmqDpNZ/v/Lirn4sji6H5PSdiRYo4xQrZsjJaPiM7nQbV3qcPeNtKapOXRCA==",
       "dependencies": {
-        "@web3modal/scaffold": "4.1.1"
+        "@web3modal/scaffold": "4.2.1"
       },
       "peerDependencies": {
         "react": ">=17",
         "react-dom": ">=17"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/@web3modal/scaffold-utils": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/scaffold-utils/-/scaffold-utils-4.1.1.tgz",
-      "integrity": "sha512-v9TlKchCPTOGitduI3hUm7PReWcxt55aifYHuCFklwgFatBlUZb/JrXpiCUhp6RpOfnSIA5gV65eyEucIbKY5A==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/scaffold-utils/-/scaffold-utils-4.2.1.tgz",
+      "integrity": "sha512-icycRYtElH5Cj4nZamwfG7Z4V5l+z52saaWsUHf+ectj65I8zAKBvYr3qh4pJ/UoxUIg/wIsX7h1qKscL0poMQ==",
       "dependencies": {
-        "@web3modal/core": "4.1.1",
-        "@web3modal/polyfills": "4.1.1",
+        "@web3modal/core": "4.2.1",
+        "@web3modal/polyfills": "4.2.1",
         "valtio": "1.11.2"
       }
     },
     "node_modules/@web3modal/scaffold-vue": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/scaffold-vue/-/scaffold-vue-4.1.1.tgz",
-      "integrity": "sha512-8qDnRmOR1jMlEB6fuFZ2CiWFYtq6M1OGKcN2DGz4c0dggivsa10cjUXqJqrsic6nUxWKPWou0+osIlJ9hR1YBA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/scaffold-vue/-/scaffold-vue-4.2.1.tgz",
+      "integrity": "sha512-p6e8UJDHKfeQiZqaCge4+b94aTE1nq2XlkcJ6nORnDWfT8Brkw/FzlJJTSwpAUWBZsqpSjv6hlaPgDVs2SVfXA==",
       "dependencies": {
-        "@web3modal/scaffold": "4.1.1"
+        "@web3modal/scaffold": "4.2.1"
       },
       "peerDependencies": {
         "vue": ">=3"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
       }
     },
     "node_modules/@web3modal/scaffold/node_modules/@lit/reactive-element": {
@@ -12745,9 +12564,9 @@
       }
     },
     "node_modules/@web3modal/scaffold/node_modules/lit-element": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
-      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz",
+      "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0",
         "@lit/reactive-element": "^2.0.4",
@@ -12755,21 +12574,21 @@
       }
     },
     "node_modules/@web3modal/scaffold/node_modules/lit-html": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
-      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz",
+      "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
     },
     "node_modules/@web3modal/siwe": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/siwe/-/siwe-4.1.1.tgz",
-      "integrity": "sha512-qQ4NKxrlD0gcFqh1G3yLlyRYABoBU7uXw3RQqpf1BiJSSMT2ePBfOwsCTJ6OPuT1RjKt9JNBADctua/sqEItCw==",
-      "optional": true,
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/siwe/-/siwe-4.2.1.tgz",
+      "integrity": "sha512-9/MYyQf7JdLPJOM4Yv3vJPAAm97ar2cJodatYgl9zB7gWOXI9U9OwoY7Xlds+AT6dTurY4l5qF+S9nBYeYNnXQ==",
       "dependencies": {
-        "@web3modal/core": "4.1.1",
-        "@web3modal/scaffold-utils": "4.1.1",
+        "@walletconnect/utils": "2.12.0",
+        "@web3modal/core": "4.2.1",
+        "@web3modal/scaffold-utils": "4.2.1",
         "lit": "3.1.0",
         "valtio": "1.11.2"
       }
@@ -12778,16 +12597,48 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
       "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
-      "optional": true,
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0"
       }
     },
+    "node_modules/@web3modal/siwe/node_modules/@walletconnect/types": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.12.0.tgz",
+      "integrity": "sha512-uhB3waGmujQVJcPgJvGOpB8RalgYSBT+HpmVbfl4Qe0xJyqpRUo4bPjQa0UYkrHaW20xIw94OuP4+FMLYdeemg==",
+      "dependencies": {
+        "@walletconnect/events": "^1.0.1",
+        "@walletconnect/heartbeat": "1.2.1",
+        "@walletconnect/jsonrpc-types": "1.0.3",
+        "@walletconnect/keyvaluestorage": "^1.1.1",
+        "@walletconnect/logger": "^2.0.1",
+        "events": "^3.3.0"
+      }
+    },
+    "node_modules/@web3modal/siwe/node_modules/@walletconnect/utils": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.12.0.tgz",
+      "integrity": "sha512-GIpfHUe1Bjp1Tjda0SkJEizKOT2biuv7VPFnKsOLT1T+8QxEP9NruC+K2UUEvijS1Qr/LKH9P5004RYNgrch+w==",
+      "dependencies": {
+        "@stablelib/chacha20poly1305": "1.0.1",
+        "@stablelib/hkdf": "1.0.1",
+        "@stablelib/random": "^1.0.2",
+        "@stablelib/sha256": "1.0.1",
+        "@stablelib/x25519": "^1.0.3",
+        "@walletconnect/relay-api": "^1.0.9",
+        "@walletconnect/safe-json": "^1.0.2",
+        "@walletconnect/time": "^1.0.2",
+        "@walletconnect/types": "2.12.0",
+        "@walletconnect/window-getters": "^1.0.1",
+        "@walletconnect/window-metadata": "^1.0.1",
+        "detect-browser": "5.3.0",
+        "query-string": "7.1.3",
+        "uint8arrays": "^3.1.0"
+      }
+    },
     "node_modules/@web3modal/siwe/node_modules/lit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
       "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
-      "optional": true,
       "dependencies": {
         "@lit/reactive-element": "^2.0.0",
         "lit-element": "^4.0.0",
@@ -12795,10 +12646,9 @@
       }
     },
     "node_modules/@web3modal/siwe/node_modules/lit-element": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
-      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
-      "optional": true,
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz",
+      "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0",
         "@lit/reactive-element": "^2.0.4",
@@ -12806,18 +12656,17 @@
       }
     },
     "node_modules/@web3modal/siwe/node_modules/lit-html": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
-      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
-      "optional": true,
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz",
+      "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
     },
     "node_modules/@web3modal/ui": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/ui/-/ui-4.1.1.tgz",
-      "integrity": "sha512-6ntwIdi3VHR1HLIiyoannOAcckDs3XYrxxIu8cflba6UyuASJ6AH/AY3ULE88fvE55jM/Lra3uuOYj8yE5QjUw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/ui/-/ui-4.2.1.tgz",
+      "integrity": "sha512-mBoSy8/q9LFw62vpPQDVBo6rcsKaNmp3U7hdzEjTdMsDd0icXxgeaFGtaNu5D6uM/TxKe4UllwcH9Up+7OGlpQ==",
       "dependencies": {
         "lit": "3.1.0",
         "qrcode": "1.5.3"
@@ -12842,9 +12691,9 @@
       }
     },
     "node_modules/@web3modal/ui/node_modules/lit-element": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
-      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.5.tgz",
+      "integrity": "sha512-iTWskWZEtn9SyEf4aBG6rKT8GABZMrTWop1+jopsEOgEcugcXJGKuX5bEbkq9qfzY+XB4MAgCaSPwnNpdsNQ3Q==",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0",
         "@lit/reactive-element": "^2.0.4",
@@ -12852,43 +12701,35 @@
       }
     },
     "node_modules/@web3modal/ui/node_modules/lit-html": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
-      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.3.tgz",
+      "integrity": "sha512-FwIbqDD8O/8lM4vUZ4KvQZjPPNx7V1VhT7vmRB8RBAO0AU6wuTVdoXiu2CivVjEGdugvcbPNBLtPE1y0ifplHA==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
     },
     "node_modules/@web3modal/wagmi": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/wagmi/-/wagmi-4.1.1.tgz",
-      "integrity": "sha512-XMT+naasTfxmt2ogHO7c2wWL63S9SkfoGEIvd7AaxtqlXZfVKtCqyJJC710WiBUhUCyt9wD6hQNjRB1nWN3TGg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/wagmi/-/wagmi-4.2.1.tgz",
+      "integrity": "sha512-89AfEm9jNjg/WsY4h/kMIyIcOlMP8kU6wZ3kjaiLruqZSrbysAD6g9nADh0EHMBbj5GrV7vI7QqmAzb8Qn/Vfg==",
       "dependencies": {
-        "@web3modal/polyfills": "4.1.1",
-        "@web3modal/scaffold": "4.1.1",
-        "@web3modal/scaffold-react": "4.1.1",
-        "@web3modal/scaffold-utils": "4.1.1",
-        "@web3modal/scaffold-vue": "4.1.1"
-      },
-      "optionalDependencies": {
-        "@web3modal/siwe": "4.1.1",
-        "react": ">=17",
-        "react-dom": ">=17",
-        "vue": ">=3"
+        "@walletconnect/ethereum-provider": "2.13.0",
+        "@web3modal/polyfills": "4.2.1",
+        "@web3modal/scaffold": "4.2.1",
+        "@web3modal/scaffold-react": "4.2.1",
+        "@web3modal/scaffold-utils": "4.2.1",
+        "@web3modal/scaffold-vue": "4.2.1",
+        "@web3modal/siwe": "4.2.1"
       },
       "peerDependencies": {
-        "@wagmi/connectors": ">=4.0.0",
+        "@wagmi/connectors": ">=4",
         "@wagmi/core": ">=2.0.0",
-        "@web3modal/siwe": "4.1.1",
         "react": ">=17",
         "react-dom": ">=17",
         "viem": ">=2.0.0",
         "vue": ">=3"
       },
       "peerDependenciesMeta": {
-        "@web3modal/siwe": {
-          "optional": true
-        },
         "react": {
           "optional": true
         },
@@ -12900,11 +12741,156 @@
         }
       }
     },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/core": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.13.0.tgz",
+      "integrity": "sha512-blDuZxQenjeXcVJvHxPznTNl6c/2DO4VNrFnus+qHmO6OtT5lZRowdMtlCaCNb1q0OxzgrmBDcTOCbFcCpio/g==",
+      "dependencies": {
+        "@walletconnect/heartbeat": "1.2.2",
+        "@walletconnect/jsonrpc-provider": "1.0.14",
+        "@walletconnect/jsonrpc-types": "1.0.4",
+        "@walletconnect/jsonrpc-utils": "1.0.8",
+        "@walletconnect/jsonrpc-ws-connection": "1.0.14",
+        "@walletconnect/keyvaluestorage": "1.1.1",
+        "@walletconnect/logger": "2.1.2",
+        "@walletconnect/relay-api": "1.0.10",
+        "@walletconnect/relay-auth": "1.0.4",
+        "@walletconnect/safe-json": "1.0.2",
+        "@walletconnect/time": "1.0.2",
+        "@walletconnect/types": "2.13.0",
+        "@walletconnect/utils": "2.13.0",
+        "events": "3.3.0",
+        "isomorphic-unfetch": "3.1.0",
+        "lodash.isequal": "4.5.0",
+        "uint8arrays": "3.1.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/ethereum-provider": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/ethereum-provider/-/ethereum-provider-2.13.0.tgz",
+      "integrity": "sha512-dnpW8mmLpWl1AZUYGYZpaAfGw1HFkL0WSlhk5xekx3IJJKn4pLacX2QeIOo0iNkzNQxZfux1AK4Grl1DvtzZEA==",
+      "dependencies": {
+        "@walletconnect/jsonrpc-http-connection": "1.0.8",
+        "@walletconnect/jsonrpc-provider": "1.0.14",
+        "@walletconnect/jsonrpc-types": "1.0.4",
+        "@walletconnect/jsonrpc-utils": "1.0.8",
+        "@walletconnect/modal": "2.6.2",
+        "@walletconnect/sign-client": "2.13.0",
+        "@walletconnect/types": "2.13.0",
+        "@walletconnect/universal-provider": "2.13.0",
+        "@walletconnect/utils": "2.13.0",
+        "events": "3.3.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/heartbeat": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@walletconnect/heartbeat/-/heartbeat-1.2.2.tgz",
+      "integrity": "sha512-uASiRmC5MwhuRuf05vq4AT48Pq8RMi876zV8rr8cV969uTOzWdB/k+Lj5yI2PBtB1bGQisGen7MM1GcZlQTBXw==",
+      "dependencies": {
+        "@walletconnect/events": "^1.0.1",
+        "@walletconnect/time": "^1.0.2",
+        "events": "^3.3.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/jsonrpc-provider": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.14.tgz",
+      "integrity": "sha512-rtsNY1XqHvWj0EtITNeuf8PHMvlCLiS3EjQL+WOkxEOA4KPxsohFnBDeyPYiNm4ZvkQdLnece36opYidmtbmow==",
+      "dependencies": {
+        "@walletconnect/jsonrpc-utils": "^1.0.8",
+        "@walletconnect/safe-json": "^1.0.2",
+        "events": "^3.3.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/jsonrpc-types": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.4.tgz",
+      "integrity": "sha512-P6679fG/M+wuWg9TY8mh6xFSdYnFyFjwFelxyISxMDrlbXokorEVXYOxiqEbrU3x1BmBoCAJJ+vtEaEoMlpCBQ==",
+      "dependencies": {
+        "events": "^3.3.0",
+        "keyvaluestorage-interface": "^1.0.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/sign-client": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.13.0.tgz",
+      "integrity": "sha512-En7KSvNUlQFx20IsYGsFgkNJ2lpvDvRsSFOT5PTdGskwCkUfOpB33SQJ6nCrN19gyoKPNvWg80Cy6MJI0TjNYA==",
+      "dependencies": {
+        "@walletconnect/core": "2.13.0",
+        "@walletconnect/events": "1.0.1",
+        "@walletconnect/heartbeat": "1.2.2",
+        "@walletconnect/jsonrpc-utils": "1.0.8",
+        "@walletconnect/logger": "2.1.2",
+        "@walletconnect/time": "1.0.2",
+        "@walletconnect/types": "2.13.0",
+        "@walletconnect/utils": "2.13.0",
+        "events": "3.3.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/types": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.13.0.tgz",
+      "integrity": "sha512-MWaVT0FkZwzYbD3tvk8F+2qpPlz1LUSWHuqbINUtMXnSzJtXN49Y99fR7FuBhNFtDalfuWsEK17GrNA+KnAsPQ==",
+      "dependencies": {
+        "@walletconnect/events": "1.0.1",
+        "@walletconnect/heartbeat": "1.2.2",
+        "@walletconnect/jsonrpc-types": "1.0.4",
+        "@walletconnect/keyvaluestorage": "1.1.1",
+        "@walletconnect/logger": "2.1.2",
+        "events": "3.3.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/universal-provider": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.13.0.tgz",
+      "integrity": "sha512-B5QvO8pnk5Bqn4aIt0OukGEQn2Auk9VbHfhQb9cGwgmSCd1GlprX/Qblu4gyT5+TjHMb1Gz5UssUaZWTWbDhBg==",
+      "dependencies": {
+        "@walletconnect/jsonrpc-http-connection": "1.0.8",
+        "@walletconnect/jsonrpc-provider": "1.0.14",
+        "@walletconnect/jsonrpc-types": "1.0.4",
+        "@walletconnect/jsonrpc-utils": "1.0.8",
+        "@walletconnect/logger": "2.1.2",
+        "@walletconnect/sign-client": "2.13.0",
+        "@walletconnect/types": "2.13.0",
+        "@walletconnect/utils": "2.13.0",
+        "events": "3.3.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/@walletconnect/utils": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.13.0.tgz",
+      "integrity": "sha512-q1eDCsRHj5iLe7fF8RroGoPZpdo2CYMZzQSrw1iqL+2+GOeqapxxuJ1vaJkmDUkwgklfB22ufqG6KQnz78sD4w==",
+      "dependencies": {
+        "@stablelib/chacha20poly1305": "1.0.1",
+        "@stablelib/hkdf": "1.0.1",
+        "@stablelib/random": "1.0.2",
+        "@stablelib/sha256": "1.0.1",
+        "@stablelib/x25519": "1.0.3",
+        "@walletconnect/relay-api": "1.0.10",
+        "@walletconnect/safe-json": "1.0.2",
+        "@walletconnect/time": "1.0.2",
+        "@walletconnect/types": "2.13.0",
+        "@walletconnect/window-getters": "1.0.1",
+        "@walletconnect/window-metadata": "1.0.1",
+        "detect-browser": "5.3.0",
+        "query-string": "7.1.3",
+        "uint8arrays": "3.1.0"
+      }
+    },
+    "node_modules/@web3modal/wagmi/node_modules/uint8arrays": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-3.1.0.tgz",
+      "integrity": "sha512-ei5rfKtoRO8OyOIor2Rz5fhzjThwIHJZ3uyDPnDHTXbP0aMQ1RN/6AI5B5d9dBxJOU+BvOAk7ZQ1xphsX8Lrog==",
+      "dependencies": {
+        "multiformats": "^9.4.2"
+      }
+    },
     "node_modules/@web3modal/wallet": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@web3modal/wallet/-/wallet-4.1.1.tgz",
-      "integrity": "sha512-KgITukYJXDete4MeH95jditHtQ1gvB+q97td0cjxA+xwzLCgihDfHZEq1kuVg5Fj40ECUV4O6IBc++cNeL9EXQ==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@web3modal/wallet/-/wallet-4.2.1.tgz",
+      "integrity": "sha512-O6PAjAHcttdkfUGMp6FN5VAEYjjh/5RycJsqfxlnDcxNVzirYgENROR+xdRL/6auR2sbnofkgIjJBGegyshn2A==",
       "dependencies": {
+        "@web3modal/polyfills": "4.2.1",
         "zod": "3.22.4"
       }
     },
@@ -13551,16 +13537,6 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
-    "node_modules/asn1.js": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
-      "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==",
-      "dependencies": {
-        "bn.js": "^4.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
     "node_modules/asn1js": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.5.tgz",
@@ -13574,18 +13550,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/assert": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
-      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-nan": "^1.3.2",
-        "object-is": "^1.1.5",
-        "object.assign": "^4.1.4",
-        "util": "^0.12.5"
-      }
-    },
     "node_modules/assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -13918,9 +13882,9 @@
       }
     },
     "node_modules/bignumber.js": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.1.tgz",
-      "integrity": "sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==",
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==",
       "engines": {
         "node": "*"
       }
@@ -13973,10 +13937,19 @@
       "resolved": "https://registry.npmjs.org/blakejs/-/blakejs-1.2.1.tgz",
       "integrity": "sha512-QXUSXI3QVc/gJME0dBpXrag1kbzOqCjCX8/b54ntNyW6sjtoqxqRk3LTmXzaJoh71zMsDCjM+47jS7XiwN/+fQ=="
     },
+    "node_modules/blo": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/blo/-/blo-1.2.0.tgz",
+      "integrity": "sha512-bZES7RzJ14B4WBT3JuOHSOAvCBmUhqznrojQ8xRjN1Fx9X9N7R+rygOFS3k4wXel2nFg4lwzL3luAYzObaDLng==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
-      "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
+      "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==",
+      "peer": true
     },
     "node_modules/bowser": {
       "version": "2.11.0",
@@ -14025,14 +13998,6 @@
       "resolved": "https://registry.npmjs.org/browser-or-node/-/browser-or-node-2.1.1.tgz",
       "integrity": "sha512-8CVjaLJGuSKMVTxJ2DpBl5XnlNDiT4cQFeuCJJrvJmts9YrTZDizTX7PjC2s6W4x+MBGZeEY6dGMrF04/6Hgqg=="
     },
-    "node_modules/browser-resolve": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-2.0.0.tgz",
-      "integrity": "sha512-7sWsQlYL2rGLy2IWm8WL8DCTJvYLc/qlOnsakDac87SOoCd16WLsaAMdCiAqsTNHIe+SXfaqyxyo6THoWqs8WQ==",
-      "dependencies": {
-        "resolve": "^1.17.0"
-      }
-    },
     "node_modules/browser-stdout": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
@@ -14052,142 +14017,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/browserify-cipher": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
-      "dependencies": {
-        "browserify-aes": "^1.0.4",
-        "browserify-des": "^1.0.0",
-        "evp_bytestokey": "^1.0.0"
-      }
-    },
-    "node_modules/browserify-des": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
-      "dependencies": {
-        "cipher-base": "^1.0.1",
-        "des.js": "^1.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "node_modules/browserify-rsa": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
-      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
-      "dependencies": {
-        "bn.js": "^5.0.0",
-        "randombytes": "^2.0.1"
-      }
-    },
-    "node_modules/browserify-rsa/node_modules/bn.js": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
-      "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ=="
-    },
-    "node_modules/browserify-sign": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.3.tgz",
-      "integrity": "sha512-JWCZW6SKhfhjJxO8Tyiiy+XYB7cqd2S5/+WeYHsKdNKFlCBhKbblba1A/HN/90YwtxKc8tCErjffZl++UNmGiw==",
-      "dependencies": {
-        "bn.js": "^5.2.1",
-        "browserify-rsa": "^4.1.0",
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "elliptic": "^6.5.5",
-        "hash-base": "~3.0",
-        "inherits": "^2.0.4",
-        "parse-asn1": "^5.1.7",
-        "readable-stream": "^2.3.8",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.12"
-      }
-    },
-    "node_modules/browserify-sign/node_modules/bn.js": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
-      "integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ=="
-    },
-    "node_modules/browserify-sign/node_modules/elliptic": {
-      "version": "6.5.5",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.5.tgz",
-      "integrity": "sha512-7EjbcmUm17NQFu4Pmgmq2olYMj8nwMnpcddByChSUjArp8F5DQWcIcpriwO4ZToLNAJig0yiyjswfyGNje/ixw==",
-      "dependencies": {
-        "bn.js": "^4.11.9",
-        "brorand": "^1.1.0",
-        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.1",
-        "inherits": "^2.0.4",
-        "minimalistic-assert": "^1.0.1",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "node_modules/browserify-sign/node_modules/elliptic/node_modules/bn.js": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
-    },
-    "node_modules/browserify-sign/node_modules/hash-base": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
-      "integrity": "sha512-EeeoJKjTyt868liAlVmcv2ZsUfGHlE3Q+BICOXcZiwN3osr5Q/zFGYmTJpoIzuaSTAwndFy+GqhEwlU4L3j4Ow==",
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/browserify-sign/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/browserify-sign/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/browserify-sign/node_modules/readable-stream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/browserify-sign/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/browserify-sign/node_modules/string_decoder/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/browserify-zlib": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
-      "dependencies": {
-        "pako": "~1.0.5"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.22.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
@@ -14291,11 +14120,6 @@
         "node": ">=6.14.2"
       }
     },
-    "node_modules/builtin-status-codes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ=="
-    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -14967,15 +14791,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/color": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-      "dependencies": {
-        "color-convert": "^1.9.3",
-        "color-string": "^1.6.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -14992,28 +14807,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
-    "node_modules/color/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/color/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
     "node_modules/color2k": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
@@ -15186,11 +14979,6 @@
         "node": "^14.18.0 || >=16.10.0"
       }
     },
-    "node_modules/console-browserify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
-      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
-    },
     "node_modules/constant-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
@@ -15202,11 +14990,6 @@
         "upper-case": "^2.0.2"
       }
     },
-    "node_modules/constants-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ=="
-    },
     "node_modules/convert-source-map": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -15295,15 +15078,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/create-ecdh": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
-      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "elliptic": "^6.5.3"
-      }
-    },
     "node_modules/create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -15332,7 +15106,8 @@
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "devOptional": true
     },
     "node_modules/cross-fetch": {
       "version": "3.1.8",
@@ -15368,27 +15143,6 @@
         }
       }
     },
-    "node_modules/crypto-browserify": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
-      "dependencies": {
-        "browserify-cipher": "^1.0.0",
-        "browserify-sign": "^4.0.0",
-        "create-ecdh": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "create-hmac": "^1.1.0",
-        "diffie-hellman": "^5.0.0",
-        "inherits": "^2.0.1",
-        "pbkdf2": "^3.0.3",
-        "public-encrypt": "^4.0.0",
-        "randombytes": "^2.0.0",
-        "randomfill": "^1.0.3"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/css-box-model": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
@@ -15642,6 +15396,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
       "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
       "dependencies": {
         "define-data-property": "^1.0.1",
         "has-property-descriptors": "^1.0.0",
@@ -15722,15 +15477,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/des.js": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
-      "integrity": "sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==",
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
     "node_modules/destr": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.3.tgz",
@@ -15797,16 +15543,6 @@
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
-    "node_modules/diffie-hellman": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "miller-rabin": "^4.0.0",
-        "randombytes": "^2.0.0"
-      }
-    },
     "node_modules/dijkstrajs": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
@@ -15852,17 +15588,6 @@
       "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
       "dev": true
     },
-    "node_modules/domain-browser": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.23.0.tgz",
-      "integrity": "sha512-ArzcM/II1wCCujdCNyQjXrAFwS4mrLh4C7DZWlaI8mdh7h3BfKdNd3bKXITfl2PT9FtfQqaGvhi1vPRQPimjGA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://bevry.me/fund"
-      }
-    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -16047,6 +15772,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -18704,11 +18430,6 @@
         "node": ">= 0.12.0"
       }
     },
-    "node_modules/https-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg=="
-    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -19289,21 +19010,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-nan": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
-      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -19595,14 +19301,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/isomorphic-timers-promises": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-timers-promises/-/isomorphic-timers-promises-1.0.1.tgz",
-      "integrity": "sha512-u4sej9B1LPSxTGKB/HiuzvEQnXH0ECYkSVQU39koSwmFAxhlEAFl9RdTvLv4TOTQUgBS5O3O5fwUxk6byBZ+IQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/isomorphic-unfetch": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz",
@@ -20956,6 +20654,7 @@
       "version": "0.30.8",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
       "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -20966,7 +20665,8 @@
     "node_modules/magic-string/node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
     },
     "node_modules/make-dir": {
       "version": "2.1.0",
@@ -21330,11 +21030,6 @@
         }
       }
     },
-    "node_modules/mersenne-twister": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/mersenne-twister/-/mersenne-twister-1.1.0.tgz",
-      "integrity": "sha512-mUYWsMKNrm4lfygPkL3OfGzOPTR2DBlTkBNHM//F6hGp8cLThY897crAlk3/Jo17LEOOjQUrNAx6DvgO77QJkA=="
-    },
     "node_modules/metro": {
       "version": "0.73.8",
       "resolved": "https://registry.npmjs.org/metro/-/metro-0.73.8.tgz",
@@ -22518,18 +22213,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/miller-rabin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
-      "dependencies": {
-        "bn.js": "^4.0.0",
-        "brorand": "^1.0.1"
-      },
-      "bin": {
-        "miller-rabin": "bin/miller-rabin"
-      }
-    },
     "node_modules/mime": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
@@ -23202,82 +22885,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
-    "node_modules/node-stdlib-browser": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/node-stdlib-browser/-/node-stdlib-browser-1.2.0.tgz",
-      "integrity": "sha512-VSjFxUhRhkyed8AtLwSCkMrJRfQ3e2lGtG3sP6FEgaLKBBbxM/dLfjRe1+iLhjvyLFW3tBQ8+c0pcOtXGbAZJg==",
-      "dependencies": {
-        "assert": "^2.0.0",
-        "browser-resolve": "^2.0.0",
-        "browserify-zlib": "^0.2.0",
-        "buffer": "^5.7.1",
-        "console-browserify": "^1.1.0",
-        "constants-browserify": "^1.0.0",
-        "create-require": "^1.1.1",
-        "crypto-browserify": "^3.11.0",
-        "domain-browser": "^4.22.0",
-        "events": "^3.0.0",
-        "https-browserify": "^1.0.0",
-        "isomorphic-timers-promises": "^1.0.1",
-        "os-browserify": "^0.3.0",
-        "path-browserify": "^1.0.1",
-        "pkg-dir": "^5.0.0",
-        "process": "^0.11.10",
-        "punycode": "^1.4.1",
-        "querystring-es3": "^0.2.1",
-        "readable-stream": "^3.6.0",
-        "stream-browserify": "^3.0.0",
-        "stream-http": "^3.2.0",
-        "string_decoder": "^1.0.0",
-        "timers-browserify": "^2.0.4",
-        "tty-browserify": "0.0.1",
-        "url": "^0.11.0",
-        "util": "^0.12.4",
-        "vm-browserify": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/node-stdlib-browser/node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
-    "node_modules/node-stdlib-browser/node_modules/pkg-dir": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
-      "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
-      "dependencies": {
-        "find-up": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/node-stdlib-browser/node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
-    },
     "node_modules/node-stream-zip": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.15.0.tgz",
@@ -23502,6 +23109,7 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
       "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3"
@@ -23517,6 +23125,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -23537,6 +23146,7 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
       "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.5",
         "define-properties": "^1.2.1",
@@ -23766,11 +23376,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/os-browserify": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A=="
-    },
     "node_modules/os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -23840,11 +23445,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
-    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -23866,34 +23466,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-asn1": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.7.tgz",
-      "integrity": "sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==",
-      "dependencies": {
-        "asn1.js": "^4.10.1",
-        "browserify-aes": "^1.2.0",
-        "evp_bytestokey": "^1.0.3",
-        "hash-base": "~3.0",
-        "pbkdf2": "^3.1.2",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/parse-asn1/node_modules/hash-base": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
-      "integrity": "sha512-EeeoJKjTyt868liAlVmcv2ZsUfGHlE3Q+BICOXcZiwN3osr5Q/zFGYmTJpoIzuaSTAwndFy+GqhEwlU4L3j4Ow==",
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/parse-filepath": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
@@ -24371,14 +23943,6 @@
         "@types/yargs-parser": "*"
       }
     },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -24451,19 +24015,6 @@
       "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
       "dev": true
     },
-    "node_modules/public-encrypt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -24572,14 +24123,7 @@
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
       "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
       "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/querystring-es3": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
+      "dev": true,
       "engines": {
         "node": ">=0.4.x"
       }
@@ -24627,15 +24171,6 @@
         "safe-buffer": "^5.1.0"
       }
     },
-    "node_modules/randomfill": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
-      "dependencies": {
-        "randombytes": "^2.0.5",
-        "safe-buffer": "^5.1.0"
-      }
-    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -26170,19 +25705,6 @@
       "integrity": "sha512-6+eerH9fEnNmi/hyM1DXcRK3pWdoMQtlkQ+ns0ntzunjKqp5i3sKCc80ym8Fib3iaYhdJUOPdhlJWj1tvge2Ww==",
       "dev": true
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -26830,26 +26352,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/stream-browserify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
-      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
-      "dependencies": {
-        "inherits": "~2.0.4",
-        "readable-stream": "^3.5.0"
-      }
-    },
-    "node_modules/stream-http": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-3.2.0.tgz",
-      "integrity": "sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==",
-      "dependencies": {
-        "builtin-status-codes": "^3.0.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.6.0",
-        "xtend": "^4.0.2"
-      }
-    },
     "node_modules/stream-shift": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
@@ -27267,17 +26769,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/timers-browserify": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
-      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
-      "dependencies": {
-        "setimmediate": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -27577,11 +27068,6 @@
       "integrity": "sha512-Tyrf5mxF8Ofs1tNoxA13lFeZ2Zrbd6cKbuH3V+MQ5sb6DtBj5FjrXVsRWT8YvNAQTqNoz66dz1WsbigI22aEnw==",
       "peer": true
     },
-    "node_modules/tty-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
-      "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw=="
-    },
     "node_modules/tweetnacl": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
@@ -28321,6 +27807,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
       "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
+      "dev": true,
       "dependencies": {
         "punycode": "1.3.2",
         "querystring": "0.2.0"
@@ -28339,7 +27826,8 @@
     "node_modules/url/node_modules/punycode": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
+      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
+      "dev": true
     },
     "node_modules/urlpattern-polyfill": {
       "version": "6.0.2",
@@ -28533,9 +28021,9 @@
       }
     },
     "node_modules/viem": {
-      "version": "2.8.14",
-      "resolved": "https://registry.npmjs.org/viem/-/viem-2.8.14.tgz",
-      "integrity": "sha512-K5u9OoyPQ7W8VPa6xY2m7oazuhemp0xuK9Ur8AkaXHtcusism9keTXDDaCw6WWFK3YR9HSojHJOtuVQqvRz0ug==",
+      "version": "2.10.9",
+      "resolved": "https://registry.npmjs.org/viem/-/viem-2.10.9.tgz",
+      "integrity": "sha512-XsbEXhOcmQOkI80zDLW0EdksimNuYTS61HZ03vQYpHoug7gwVHDQ83nY+nuyT7punuFx0fmRG6+HZg3yVQhptQ==",
       "funding": [
         {
           "type": "github",
@@ -28549,7 +28037,7 @@
         "@scure/bip32": "1.3.2",
         "@scure/bip39": "1.2.1",
         "abitype": "1.0.0",
-        "isows": "1.0.3",
+        "isows": "1.0.4",
         "ws": "8.13.0"
       },
       "peerDependencies": {
@@ -28591,6 +28079,20 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/viem/node_modules/isows": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.4.tgz",
+      "integrity": "sha512-hEzjY+x9u9hPmBom9IIAqdJCwNLax+xrPb51vEPpERoFlIxgmZcHzsT5jKG06nvInKOBGvReAVz80Umed5CczQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/wagmi-dev"
+        }
+      ],
+      "peerDependencies": {
+        "ws": "*"
+      }
+    },
     "node_modules/viem/node_modules/ws": {
       "version": "8.13.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
@@ -28800,21 +28302,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/vite-plugin-node-polyfills": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-node-polyfills/-/vite-plugin-node-polyfills-0.21.0.tgz",
-      "integrity": "sha512-Sk4DiKnmxN8E0vhgEhzLudfJQfaT8k4/gJ25xvUPG54KjLJ6HAmDKbr4rzDD/QWEY+Lwg80KE85fGYBQihEPQA==",
-      "dependencies": {
-        "@rollup/plugin-inject": "^5.0.5",
-        "node-stdlib-browser": "^1.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/davidmyersdev"
-      },
-      "peerDependencies": {
-        "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
-      }
-    },
     "node_modules/vite/node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -29013,11 +28500,6 @@
       "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==",
       "peer": true
     },
-    "node_modules/vm-browserify": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
-      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
-    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -29082,26 +28564,6 @@
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
       "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw=="
     },
-    "node_modules/vue": {
-      "version": "3.4.21",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
-      "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
-      "dependencies": {
-        "@vue/compiler-dom": "3.4.21",
-        "@vue/compiler-sfc": "3.4.21",
-        "@vue/runtime-dom": "3.4.21",
-        "@vue/server-renderer": "3.4.21",
-        "@vue/shared": "3.4.21"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -29115,12 +28577,12 @@
       }
     },
     "node_modules/wagmi": {
-      "version": "2.5.11",
-      "resolved": "https://registry.npmjs.org/wagmi/-/wagmi-2.5.11.tgz",
-      "integrity": "sha512-uugglHWhd7j432q5ga75F3YB7yeGjNmiOKztByWCyEA9EqLAqA2RML8/koN/0pgFmZKG9xzP+0zoo2l9vTrTsw==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/wagmi/-/wagmi-2.9.0.tgz",
+      "integrity": "sha512-bmxJRN3PA+l/102BAluC77R3XkNM9unCzLKOBlNsk0Muth3eCmr8A7ScZIdu/tSxvhU2MR73c9pA+Etecb87ww==",
       "dependencies": {
-        "@wagmi/connectors": "4.1.18",
-        "@wagmi/core": "2.6.9",
+        "@wagmi/connectors": "5.0.0",
+        "@wagmi/core": "2.10.0",
         "use-sync-external-store": "1.2.0"
       },
       "funding": {
@@ -29138,6 +28600,307 @@
         }
       }
     },
+    "node_modules/wagmi/node_modules/@metamask/sdk": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/@metamask/sdk/-/sdk-0.14.1.tgz",
+      "integrity": "sha512-52kfvnlyMXRO8/oPGoQOFMevSjgkLzpl8aGG6Ivx/6jiqSv5ScuOg6YdSWXR937Ts0zWE0V8KTUBMfnGGt0S9Q==",
+      "dependencies": {
+        "@metamask/onboarding": "^1.0.1",
+        "@metamask/post-message-stream": "^6.1.0",
+        "@metamask/providers": "^10.2.1",
+        "@metamask/sdk-communication-layer": "0.14.1",
+        "@metamask/sdk-install-modal-web": "0.14.1",
+        "@react-native-async-storage/async-storage": "^1.17.11",
+        "@types/dom-screen-wake-lock": "^1.0.0",
+        "bowser": "^2.9.0",
+        "cross-fetch": "^4.0.0",
+        "eciesjs": "^0.3.15",
+        "eth-rpc-errors": "^4.0.3",
+        "eventemitter2": "^6.4.7",
+        "extension-port-stream": "^2.0.1",
+        "i18next": "22.5.1",
+        "i18next-browser-languagedetector": "^7.1.0",
+        "obj-multiplex": "^1.0.0",
+        "pump": "^3.0.0",
+        "qrcode-terminal-nooctal": "^0.12.1",
+        "react-i18next": "^13.2.2",
+        "react-native-webview": "^11.26.0",
+        "readable-stream": "^2.3.7",
+        "rollup-plugin-visualizer": "^5.9.2",
+        "socket.io-client": "^4.5.1",
+        "util": "^0.12.4",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wagmi/node_modules/@metamask/sdk-communication-layer": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/@metamask/sdk-communication-layer/-/sdk-communication-layer-0.14.1.tgz",
+      "integrity": "sha512-K1KhkKMdAAPi079G/bX/cIazqT6qnkRnykrs7nA1sU2BouG7BYD4qPgv7ridc3BNIewnFg9eMzzYIgOgfXzJKw==",
+      "dependencies": {
+        "bufferutil": "^4.0.8",
+        "cross-fetch": "^3.1.5",
+        "date-fns": "^2.29.3",
+        "eciesjs": "^0.3.16",
+        "eventemitter2": "^6.4.5",
+        "socket.io-client": "^4.5.1",
+        "utf-8-validate": "^6.0.3",
+        "uuid": "^8.3.2"
+      }
+    },
+    "node_modules/wagmi/node_modules/@metamask/sdk/node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
+    "node_modules/wagmi/node_modules/@wagmi/connectors": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@wagmi/connectors/-/connectors-5.0.0.tgz",
+      "integrity": "sha512-jdoEMgBB4Dsd4ma5jjUmF15gec3fSxMSYlud8s1MASudgq7pwk9SzMjVNra6lvV57aCJ09VC41XpXYYgFJwelA==",
+      "deprecated": "mistaken publish, do not use",
+      "dependencies": {
+        "@coinbase/wallet-sdk": "3.9.1",
+        "@metamask/sdk": "0.14.1",
+        "@safe-global/safe-apps-provider": "0.18.1",
+        "@safe-global/safe-apps-sdk": "8.1.0",
+        "@walletconnect/ethereum-provider": "2.11.0",
+        "@walletconnect/modal": "2.6.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/wevm"
+      },
+      "peerDependencies": {
+        "@wagmi/core": "2.3.0",
+        "typescript": ">=5.0.4",
+        "viem": "2.x"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wagmi/node_modules/@wagmi/core": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.10.0.tgz",
+      "integrity": "sha512-nyf3W1SJVSDfMmbuxAo3TZ0eiIhnCW8kIwbF2MkR46kihlCTS+EPTet7dPXs5A2KVHDKm9I4gvSIXk1QOZbwOg==",
+      "dependencies": {
+        "eventemitter3": "5.0.1",
+        "mipd": "0.0.5",
+        "zustand": "4.4.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/wevm"
+      },
+      "peerDependencies": {
+        "@tanstack/query-core": ">=5.0.0",
+        "typescript": ">=5.0.4",
+        "viem": "2.x"
+      },
+      "peerDependenciesMeta": {
+        "@tanstack/query-core": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wagmi/node_modules/@walletconnect/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-2Tjp5BCevI7dbmqo/OrCjX4tqgMqwJNQLlQAlphqPfvwlF9+tIu6pGcVbSN3U9zyXzWIZCeleqEaWUeSeET4Ew==",
+      "dependencies": {
+        "@walletconnect/heartbeat": "1.2.1",
+        "@walletconnect/jsonrpc-provider": "1.0.13",
+        "@walletconnect/jsonrpc-types": "1.0.3",
+        "@walletconnect/jsonrpc-utils": "1.0.8",
+        "@walletconnect/jsonrpc-ws-connection": "1.0.14",
+        "@walletconnect/keyvaluestorage": "^1.1.1",
+        "@walletconnect/logger": "^2.0.1",
+        "@walletconnect/relay-api": "^1.0.9",
+        "@walletconnect/relay-auth": "^1.0.4",
+        "@walletconnect/safe-json": "^1.0.2",
+        "@walletconnect/time": "^1.0.2",
+        "@walletconnect/types": "2.11.0",
+        "@walletconnect/utils": "2.11.0",
+        "events": "^3.3.0",
+        "isomorphic-unfetch": "3.1.0",
+        "lodash.isequal": "4.5.0",
+        "uint8arrays": "^3.1.0"
+      }
+    },
+    "node_modules/wagmi/node_modules/@walletconnect/ethereum-provider": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/ethereum-provider/-/ethereum-provider-2.11.0.tgz",
+      "integrity": "sha512-YrTeHVjuSuhlUw7SQ6xBJXDuJ6iAC+RwINm9nVhoKYJSHAy3EVSJZOofMKrnecL0iRMtD29nj57mxAInIBRuZA==",
+      "dependencies": {
+        "@walletconnect/jsonrpc-http-connection": "^1.0.7",
+        "@walletconnect/jsonrpc-provider": "^1.0.13",
+        "@walletconnect/jsonrpc-types": "^1.0.3",
+        "@walletconnect/jsonrpc-utils": "^1.0.8",
+        "@walletconnect/modal": "^2.6.2",
+        "@walletconnect/sign-client": "2.11.0",
+        "@walletconnect/types": "2.11.0",
+        "@walletconnect/universal-provider": "2.11.0",
+        "@walletconnect/utils": "2.11.0",
+        "events": "^3.3.0"
+      }
+    },
+    "node_modules/wagmi/node_modules/@walletconnect/sign-client": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/sign-client/-/sign-client-2.11.0.tgz",
+      "integrity": "sha512-H2ukscibBS+6WrzQWh+WyVBqO5z4F5et12JcwobdwgHnJSlqIoZxqnUYYWNCI5rUR5UKsKWaUyto4AE9N5dw4Q==",
+      "dependencies": {
+        "@walletconnect/core": "2.11.0",
+        "@walletconnect/events": "^1.0.1",
+        "@walletconnect/heartbeat": "1.2.1",
+        "@walletconnect/jsonrpc-utils": "1.0.8",
+        "@walletconnect/logger": "^2.0.1",
+        "@walletconnect/time": "^1.0.2",
+        "@walletconnect/types": "2.11.0",
+        "@walletconnect/utils": "2.11.0",
+        "events": "^3.3.0"
+      }
+    },
+    "node_modules/wagmi/node_modules/@walletconnect/types": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-2.11.0.tgz",
+      "integrity": "sha512-AB5b1lrEbCGHxqS2vqfCkIoODieH+ZAUp9rA1O2ftrhnqDJiJK983Df87JhYhECsQUBHHfALphA8ydER0q+9sw==",
+      "dependencies": {
+        "@walletconnect/events": "^1.0.1",
+        "@walletconnect/heartbeat": "1.2.1",
+        "@walletconnect/jsonrpc-types": "1.0.3",
+        "@walletconnect/keyvaluestorage": "^1.1.1",
+        "@walletconnect/logger": "^2.0.1",
+        "events": "^3.3.0"
+      }
+    },
+    "node_modules/wagmi/node_modules/@walletconnect/universal-provider": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.11.0.tgz",
+      "integrity": "sha512-zgJv8jDvIMP4Qse/D9oIRXGdfoNqonsrjPZanQ/CHNe7oXGOBiQND2IIeX+tS0H7uNA0TPvctljCLiIN9nw4eA==",
+      "dependencies": {
+        "@walletconnect/jsonrpc-http-connection": "^1.0.7",
+        "@walletconnect/jsonrpc-provider": "1.0.13",
+        "@walletconnect/jsonrpc-types": "^1.0.2",
+        "@walletconnect/jsonrpc-utils": "^1.0.7",
+        "@walletconnect/logger": "^2.0.1",
+        "@walletconnect/sign-client": "2.11.0",
+        "@walletconnect/types": "2.11.0",
+        "@walletconnect/utils": "2.11.0",
+        "events": "^3.3.0"
+      }
+    },
+    "node_modules/wagmi/node_modules/@walletconnect/utils": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.11.0.tgz",
+      "integrity": "sha512-hxkHPlTlDQILHfIKXlmzgNJau/YcSBC3XHUSuZuKZbNEw3duFT6h6pm3HT/1+j1a22IG05WDsNBuTCRkwss+BQ==",
+      "dependencies": {
+        "@stablelib/chacha20poly1305": "1.0.1",
+        "@stablelib/hkdf": "1.0.1",
+        "@stablelib/random": "^1.0.2",
+        "@stablelib/sha256": "1.0.1",
+        "@stablelib/x25519": "^1.0.3",
+        "@walletconnect/relay-api": "^1.0.9",
+        "@walletconnect/safe-json": "^1.0.2",
+        "@walletconnect/time": "^1.0.2",
+        "@walletconnect/types": "2.11.0",
+        "@walletconnect/window-getters": "^1.0.1",
+        "@walletconnect/window-metadata": "^1.0.1",
+        "detect-browser": "5.3.0",
+        "query-string": "7.1.3",
+        "uint8arrays": "^3.1.0"
+      }
+    },
+    "node_modules/wagmi/node_modules/i18next": {
+      "version": "22.5.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.5.1.tgz",
+      "integrity": "sha512-8TGPgM3pAD+VRsMtUMNknRz3kzqwp/gPALrWMsDnmC1mKqJwpWyooQRLMcbTwq8z8YwSmuj+ZYvc+xCuEpkssA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
+    "node_modules/wagmi/node_modules/i18next-browser-languagedetector": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.1.tgz",
+      "integrity": "sha512-h/pM34bcH6tbz8WgGXcmWauNpQupCGr25XPp9cZwZInR9XHSjIFDYp1SIok7zSPsTOMxdvuLyu86V+g2Kycnfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/wagmi/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/wagmi/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/wagmi/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/wagmi/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/wagmi/node_modules/utf-8-validate": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.4.tgz",
+      "integrity": "sha512-xu9GQDeFp+eZ6LnCywXN/zBancWvOpUMzgjLPSjy4BRHSmTelvn2E0DG0o1sTiw5hkCKBHo8rwSKncfRfv2EEQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -29869,6 +29632,33 @@
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
+    "node_modules/zustand": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.1.tgz",
+      "integrity": "sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index eba9c8aa55..79c142018a 100644
--- a/package.json
+++ b/package.json
@@ -1,34 +1,34 @@
 {
-  "name": "fractal-interface",
+  "name": "decent-interface",
   "version": "0.1.2",
   "private": true,
   "dependencies": {
     "@adraffy/ens-normalize": "^1.10.1",
     "@apollo/client": "^3.7.10",
     "@chakra-ui/react": "^2.8.2",
-    "@decent-org/fractal-ui": "^0.1.25",
+    "@decent-org/fractal-ui": "^0.3.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@fontsource/ibm-plex-mono": "^4.5.12",
-    "@fontsource/ibm-plex-sans": "^4.5.13",
+    "@fontsource/space-mono": "^5.0.19",
     "@fractal-framework/fractal-contracts": "^0.7.0",
     "@graphprotocol/client-apollo": "^1.0.16",
     "@lido-sdk/contracts": "^3.0.2",
     "@netlify/blobs": "^6.5.0",
     "@netlify/functions": "^2.6.0",
+    "@phosphor-icons/react": "^2.1.4",
     "@safe-global/safe-deployments": "^1.34.0",
     "@safe-global/safe-ethers-lib": "^1.9.2",
     "@safe-global/safe-service-client": "^1.5.2",
     "@sentry/react": "^7.112.2",
     "@shutter-network/shutter-crypto": "^1.0.1",
     "@snapshot-labs/snapshot.js": "^0.7.3",
-    "@tanstack/react-query": "^5.28.4",
-    "@ukstv/jazzicon-react": "^1.0.0",
+    "@tanstack/react-query": "^5.36.2",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "@web3modal/wagmi": "^4.1.1",
+    "@web3modal/wagmi": "^4.2.1",
     "axios": "^0.27.2",
+    "blo": "^1.2.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.1",
@@ -49,11 +49,10 @@
     "react-router-dom": "^6.22.0",
     "react-toastify": "^9.0.8",
     "remark-gfm": "^4.0.0",
-    "viem": "^2.8.12",
+    "viem": "^2.10.9",
     "vite": "^5.1.0",
     "vite-plugin-checker": "^0.6.4",
-    "vite-plugin-node-polyfills": "^0.21.0",
-    "wagmi": "^2.5.11",
+    "wagmi": "^2.9.0",
     "yup": "^1"
   },
   "scripts": {
diff --git a/public/.well-known/security.txt b/public/.well-known/security.txt
index 3768152c20..baaef01fc7 100644
--- a/public/.well-known/security.txt
+++ b/public/.well-known/security.txt
@@ -1,6 +1,6 @@
-Contact: mailto:security@decent-dao.org
+Contact: mailto:security@decentdao.org
 Expires: 2024-01-01T05:00:00.000Z
-Encryption: https://keys.openpgp.org/search?q=security%40decent-dao.org
+Encryption: https://keys.openpgp.org/search?q=security%40decentdao.org
 Preferred-Languages: en
-Canonical: https://www.fractalframework.xyz/.well-known/security.txt
-Policy: https://github.com/decent-dao/fractal-interface/blob/HEAD/.github/SECURITY.md
+Canonical: https://app.decentdao.org/.well-known/security.txt
+Policy: https://github.com/decentdao/decent-interface/blob/HEAD/.github/SECURITY.md
diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
new file mode 100644
index 0000000000..deeff5f49f
Binary files /dev/null and b/public/android-icon-144x144.png differ
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
new file mode 100644
index 0000000000..2207943f6b
Binary files /dev/null and b/public/android-icon-192x192.png differ
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
new file mode 100644
index 0000000000..534006ee18
Binary files /dev/null and b/public/android-icon-36x36.png differ
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
new file mode 100644
index 0000000000..5af4df818c
Binary files /dev/null and b/public/android-icon-48x48.png differ
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
new file mode 100644
index 0000000000..7f1db72c35
Binary files /dev/null and b/public/android-icon-72x72.png differ
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
new file mode 100644
index 0000000000..5451b3b073
Binary files /dev/null and b/public/android-icon-96x96.png differ
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
new file mode 100644
index 0000000000..618a558de1
Binary files /dev/null and b/public/apple-icon-114x114.png differ
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
new file mode 100644
index 0000000000..b7c5669ac0
Binary files /dev/null and b/public/apple-icon-120x120.png differ
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
new file mode 100644
index 0000000000..deeff5f49f
Binary files /dev/null and b/public/apple-icon-144x144.png differ
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
new file mode 100644
index 0000000000..8ab0195eed
Binary files /dev/null and b/public/apple-icon-152x152.png differ
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
new file mode 100644
index 0000000000..e37f62809d
Binary files /dev/null and b/public/apple-icon-180x180.png differ
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
new file mode 100644
index 0000000000..6143417465
Binary files /dev/null and b/public/apple-icon-57x57.png differ
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
new file mode 100644
index 0000000000..d8895a6108
Binary files /dev/null and b/public/apple-icon-60x60.png differ
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
new file mode 100644
index 0000000000..7f1db72c35
Binary files /dev/null and b/public/apple-icon-72x72.png differ
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
new file mode 100644
index 0000000000..29284663b6
Binary files /dev/null and b/public/apple-icon-76x76.png differ
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
new file mode 100644
index 0000000000..2652ab915e
Binary files /dev/null and b/public/apple-icon-precomposed.png differ
diff --git a/public/apple-icon.png b/public/apple-icon.png
new file mode 100644
index 0000000000..2652ab915e
Binary files /dev/null and b/public/apple-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000000..c554148223
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000000..3a3886978a
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000000..b62cd9540a
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
new file mode 100644
index 0000000000..5451b3b073
Binary files /dev/null and b/public/favicon-96x96.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 46650d8596..5ebaf09ca1 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/fonts/TT_Firs_Neue_Variable.woff b/public/fonts/TT_Firs_Neue_Variable.woff
new file mode 100644
index 0000000000..b6b73a9cc9
Binary files /dev/null and b/public/fonts/TT_Firs_Neue_Variable.woff differ
diff --git a/public/fonts/TT_Firs_Neue_Variable.woff2 b/public/fonts/TT_Firs_Neue_Variable.woff2
new file mode 100644
index 0000000000..850af46bc1
Binary files /dev/null and b/public/fonts/TT_Firs_Neue_Variable.woff2 differ
diff --git a/public/images/alert-triangle.svg b/public/images/alert-triangle.svg
deleted file mode 100644
index 817caf48c1..0000000000
--- a/public/images/alert-triangle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.8227 0.486445L19.8727 16.5405C19.9561 16.6884 20 16.8562 20 17.027C20 17.1978 19.9561 17.3656 19.8727 17.5135C19.7893 17.6614 19.6694 17.7842 19.525 17.8696C19.3806 17.955 19.2168 18 19.05 18L0.950007 18C0.783243 18 0.619419 17.955 0.475 17.8696C0.33058 17.7842 0.210654 17.6614 0.127274 17.5135C0.0438942 17.3656 -1.05912e-06 17.1978 0 17.027C1.05916e-06 16.8562 0.0438985 16.6884 0.12728 16.5405L9.17727 0.486445C9.26066 0.338545 9.38059 0.21573 9.52501 0.130341C9.66942 0.0449529 9.83324 0 10 0C10.1668 0 10.3306 0.0449529 10.475 0.130341C10.6194 0.21573 10.7393 0.338545 10.8227 0.486445ZM2.59546 16.054L17.4045 16.054L10 2.91888L2.59546 16.054ZM9.04997 13.1351H10.95V15.0811H9.04997V13.1351ZM9.04997 6.3243L10.95 6.3243L10.95 11.1892H9.04997L9.04997 6.3243Z" fill="#A3A29F"/>
-</svg>
diff --git a/public/images/arrow-up-left.svg b/public/images/arrow-up-left.svg
deleted file mode 100644
index 11a71118da..0000000000
--- a/public/images/arrow-up-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 18V20H13.5C11.7761 20 10.1228 19.3152 8.90381 18.0962C7.68482 16.8772 7 15.2239 7 13.5V7.83L3.91 10.92L2.5 9.5L8 4L13.5 9.5L12.09 10.91L9 7.83V13.5C9 16 11 18 13.5 18H20Z" fill="#FABD2E"/>
-</svg>
diff --git a/public/images/coin-icon-eth.svg b/public/images/coin-icon-eth.svg
index faa1251d84..4e2a9abeeb 100644
--- a/public/images/coin-icon-eth.svg
+++ b/public/images/coin-icon-eth.svg
@@ -1,3 +1,3 @@
-<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.96848 10.4821L0.670898 7.94591L4.96585 14.0005L9.26562 7.94591L4.96585 10.4821H4.96848ZM5.03236 0L0.736524 7.12997L5.03236 9.67054L9.32994 7.13259L5.03236 0Z" fill="#E8E7E5"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M9.96084 14.3526L4.58887 11.1824L9.95756 18.7506L15.3323 11.1824L9.95756 14.3526H9.96084ZM10.0407 1.25L4.6709 10.1625L10.0407 13.3382L15.4127 10.1657L10.0407 1.25Z" fill="#F8F4FC"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/coin-icon-polygon.svg b/public/images/coin-icon-polygon.svg
deleted file mode 100644
index a5bb6124fc..0000000000
--- a/public/images/coin-icon-polygon.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 38.4 33.5" style="enable-background:new 0 0 38.4 33.5;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#8247E5;}
-</style>
-<g>
-	<path class="st0" d="M29,10.2c-0.7-0.4-1.6-0.4-2.4,0L21,13.5l-3.8,2.1l-5.5,3.3c-0.7,0.4-1.6,0.4-2.4,0L5,16.3
-		c-0.7-0.4-1.2-1.2-1.2-2.1v-5c0-0.8,0.4-1.6,1.2-2.1l4.3-2.5c0.7-0.4,1.6-0.4,2.4,0L16,7.2c0.7,0.4,1.2,1.2,1.2,2.1v3.3l3.8-2.2V7
-		c0-0.8-0.4-1.6-1.2-2.1l-8-4.7c-0.7-0.4-1.6-0.4-2.4,0L1.2,5C0.4,5.4,0,6.2,0,7v9.4c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7
-		c0.7,0.4,1.6,0.4,2.4,0l5.5-3.2l3.8-2.2l5.5-3.2c0.7-0.4,1.6-0.4,2.4,0l4.3,2.5c0.7,0.4,1.2,1.2,1.2,2.1v5c0,0.8-0.4,1.6-1.2,2.1
-		L29,28.8c-0.7,0.4-1.6,0.4-2.4,0l-4.3-2.5c-0.7-0.4-1.2-1.2-1.2-2.1V21l-3.8,2.2v3.3c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7
-		c0.7,0.4,1.6,0.4,2.4,0l8.1-4.7c0.7-0.4,1.2-1.2,1.2-2.1V17c0-0.8-0.4-1.6-1.2-2.1L29,10.2z"/>
-</g>
-</svg>
diff --git a/public/images/external-link.svg b/public/images/external-link.svg
deleted file mode 100644
index 2377c99b49..0000000000
--- a/public/images/external-link.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.70684 4.40666L8.65017 5.34999C9.08356 5.78334 9.42735 6.29781 9.6619 6.86403C9.89645 7.43024 10.0172 8.03712 10.0172 8.64999C10.0172 9.26287 9.89645 9.86974 9.6619 10.436C9.42735 11.0022 9.08356 11.5166 8.65017 11.95L8.41417 12.1853C7.53896 13.0605 6.35191 13.5522 5.11417 13.5522C3.87643 13.5522 2.68938 13.0605 1.81417 12.1853C0.938956 11.3101 0.447266 10.1231 0.447266 8.88533C0.447266 7.64759 0.938956 6.46054 1.81417 5.58533L2.7575 6.52866C2.44575 6.83769 2.19811 7.20526 2.02879 7.61026C1.85947 8.01526 1.77182 8.44972 1.77086 8.88868C1.76989 9.32765 1.85565 9.76248 2.02319 10.1682C2.19073 10.574 2.43676 10.9426 2.74716 11.253C3.05756 11.5634 3.42621 11.8094 3.83194 11.977C4.23768 12.1445 4.67251 12.2303 5.11148 12.2293C5.55045 12.2283 5.9849 12.1407 6.3899 11.9714C6.7949 11.8021 7.16247 11.5544 7.4715 11.2427L7.7075 11.0067C8.33241 10.3816 8.68346 9.53387 8.68346 8.64999C8.68346 7.76611 8.33241 6.91842 7.7075 6.29332L6.76417 5.34999L7.7075 4.40733L7.70684 4.40666ZM12.1855 8.41399L11.2428 7.47132C11.5546 7.16229 11.8022 6.79472 11.9716 6.38972C12.1409 5.98472 12.2285 5.55027 12.2295 5.1113C12.2304 4.67234 12.1447 4.2375 11.9772 3.83176C11.8096 3.42603 11.5636 3.05738 11.2532 2.74698C10.9428 2.43658 10.5741 2.19055 10.1684 2.02301C9.76266 1.85547 9.32783 1.76972 8.88886 1.77068C8.44989 1.77164 8.01544 1.85929 7.61044 2.02861C7.20544 2.19793 6.83787 2.44557 6.52884 2.75733L6.29284 2.99333C5.66793 3.61842 5.31688 4.46611 5.31688 5.34999C5.31688 6.23387 5.66793 7.08157 6.29284 7.70666L7.23617 8.64999L6.29284 9.59266L5.35017 8.64999C4.91678 8.21665 4.57299 7.70218 4.33844 7.13596C4.10389 6.56974 3.98317 5.96287 3.98317 5.34999C3.98317 4.73712 4.10389 4.13024 4.33844 3.56403C4.57299 2.99781 4.91678 2.48334 5.35017 2.04999L5.58617 1.81466C6.46138 0.939444 7.64843 0.447754 8.88617 0.447754C10.1239 0.447754 11.311 0.939444 12.1862 1.81466C13.0614 2.68987 13.5531 3.87692 13.5531 5.11466C13.5531 6.3524 13.0614 7.53944 12.1862 8.41466L12.1855 8.41399Z" fill="#FABD2E"/>
-</svg>
\ No newline at end of file
diff --git a/public/images/footer-logo.svg b/public/images/footer-logo.svg
new file mode 100644
index 0000000000..10880acfd1
--- /dev/null
+++ b/public/images/footer-logo.svg
@@ -0,0 +1,11 @@
+<svg width="297" height="20" viewBox="0 0 297 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.2634 16.3064L2.2634 2.74175L5.8871 2.74175L9.45267 11.4619L10.1309 11.4619L13.6965 2.74175L17.262 2.74175L17.262 16.3064L15.518 16.3064L15.518 4.35013L14.7816 4.35013L11.2161 13.0703L8.30936 13.0703L4.7438 4.35013L4.00743 4.35013L4.00743 16.3064L2.2634 16.3064ZM23.7935 16.5002C22.9538 16.5002 22.1851 16.287 21.4875 15.8607C20.8028 15.4344 20.2538 14.8401 19.8404 14.0779C19.4399 13.3028 19.2397 12.4179 19.2397 11.4231C19.2397 10.4284 19.4399 9.54991 19.8404 8.78771C20.2538 8.01258 20.8028 7.41186 21.4875 6.98554C22.1851 6.55923 22.9538 6.34607 23.7935 6.34607C24.5169 6.34607 25.1887 6.51401 25.8088 6.8499C26.4289 7.17287 26.9069 7.6121 27.2428 8.16761L27.3397 8.16761L27.3397 6.53985L28.8706 6.53985L28.8706 16.3064L27.3397 16.3064L27.3397 14.6786L27.2428 14.6786C26.9069 15.2341 26.4289 15.6798 25.8088 16.0157C25.1887 16.3387 24.5169 16.5002 23.7935 16.5002ZM24.1423 15.0274C24.7624 15.0274 25.305 14.8853 25.7701 14.6011C26.2351 14.304 26.5969 13.8841 26.8552 13.3416C27.1265 12.799 27.2622 12.1595 27.2622 11.4231C27.2622 10.6868 27.1265 10.0473 26.8552 9.50469C26.5969 8.96211 26.2351 8.54871 25.7701 8.2645C25.305 7.96737 24.7624 7.8188 24.1423 7.8188C23.4964 7.8188 22.9279 7.96091 22.437 8.24512C21.959 8.52933 21.5844 8.94273 21.3131 9.48532C21.0547 10.0279 20.9255 10.6738 20.9255 11.4231C20.9255 12.1595 21.0547 12.8054 21.3131 13.3609C21.5844 13.9035 21.959 14.3169 22.437 14.6011C22.9279 14.8853 23.4964 15.0274 24.1423 15.0274ZM35.0585 16.5002C34.2188 16.5002 33.4501 16.287 32.7525 15.8607C32.0678 15.4344 31.5188 14.8401 31.1054 14.0779C30.7049 13.3028 30.5047 12.4179 30.5047 11.4231C30.5047 10.4284 30.7049 9.54991 31.1054 8.78771C31.5188 8.01258 32.0678 7.41186 32.7525 6.98554C33.4501 6.55923 34.2188 6.34607 35.0585 6.34607C35.782 6.34607 36.4473 6.51401 37.0545 6.8499C37.6616 7.17287 38.1202 7.59272 38.4303 8.10947L38.5272 8.10947L38.5272 2.74175L40.1356 2.74175L40.1356 16.3064L38.6047 16.3064L38.6047 14.6786L38.5078 14.6786C38.1719 15.2341 37.6939 15.6798 37.0738 16.0157C36.4537 16.3387 35.782 16.5002 35.0585 16.5002ZM35.4073 15.0274C36.0274 15.0274 36.57 14.8853 37.0351 14.6011C37.5002 14.304 37.8619 13.8841 38.1202 13.3416C38.3915 12.799 38.5272 12.1595 38.5272 11.4231C38.5272 10.6868 38.3915 10.0473 38.1202 9.50469C37.8619 8.96211 37.5002 8.54871 37.0351 8.2645C36.57 7.96737 36.0274 7.8188 35.4073 7.8188C34.7614 7.8188 34.193 7.96091 33.702 8.24512C33.2241 8.52933 32.8494 8.94273 32.5781 9.48532C32.3197 10.0279 32.1906 10.6738 32.1906 11.4231C32.1906 12.1595 32.3197 12.8054 32.5781 13.3609C32.8494 13.9035 33.2241 14.3169 33.702 14.6011C34.193 14.8853 34.7614 15.0274 35.4073 15.0274ZM46.808 16.5002C45.8778 16.5002 45.0252 16.2806 44.2501 15.8413C43.4879 15.3892 42.8807 14.7755 42.4285 14.0004C41.9893 13.2253 41.7697 12.3662 41.7697 11.4231C41.7697 10.4801 41.9893 9.62096 42.4285 8.84584C42.8807 8.07072 43.4879 7.46354 44.2501 7.0243C45.0252 6.57215 45.8778 6.34607 46.808 6.34607C47.7123 6.34607 48.5391 6.56569 49.2884 7.00492C50.0377 7.44416 50.6319 8.0578 51.0712 8.84584C51.5104 9.63388 51.73 10.5317 51.73 11.5394C51.73 11.6169 51.73 11.688 51.73 11.7525C51.73 11.8042 51.73 11.8624 51.73 11.927L42.6805 11.927L42.6805 10.5899L50.7417 10.5899L50.1023 11.0549C50.0635 10.4607 49.902 9.91809 49.6178 9.42718C49.3336 8.92335 48.946 8.52933 48.4551 8.24512C47.9771 7.96091 47.4281 7.8188 46.808 7.8188C46.1491 7.8188 45.5678 7.97383 45.064 8.28387C44.5601 8.58101 44.1661 9.00732 43.8819 9.56283C43.5977 10.1054 43.4556 10.7255 43.4556 11.4231C43.4556 12.1207 43.5977 12.7473 43.8819 13.3028C44.1661 13.8454 44.5601 14.2717 45.064 14.5817C45.5678 14.8789 46.1491 15.0274 46.808 15.0274C47.5444 15.0274 48.1644 14.8595 48.6683 14.5236C49.185 14.1877 49.5661 13.7356 49.8116 13.1671L51.4975 13.1671C51.3166 13.7614 51.013 14.3169 50.5867 14.8337C50.1604 15.3375 49.6243 15.7444 48.9783 16.0545C48.3324 16.3516 47.6089 16.5002 46.808 16.5002ZM58.2133 16.3064L56.1399 6.53985L57.787 6.53985L59.4729 14.8337L60.2868 14.8337L61.9921 6.53985L64.86 6.53985L66.5653 14.8337L67.3985 14.8337L69.0651 6.53985L70.6928 6.53985L68.6194 16.3064L65.422 16.3064L63.6973 8.01258L63.116 8.01258L61.4495 16.3064L58.2133 16.3064ZM72.2509 16.3064L72.2509 6.53985L73.8593 6.53985L73.8593 16.3064L72.2509 16.3064ZM73.0454 5.04774C72.7483 5.04774 72.5028 4.95085 72.3091 4.75707C72.1153 4.55037 72.0184 4.30491 72.0184 4.0207C72.0184 3.73649 72.1153 3.49749 72.3091 3.30371C72.5028 3.09701 72.7483 2.99366 73.0454 2.99366C73.3296 2.99366 73.5686 3.09701 73.7624 3.30371C73.9691 3.49749 74.0725 3.73649 74.0725 4.0207C74.0725 4.30491 73.9691 4.55037 73.7624 4.75707C73.5686 4.95085 73.3296 5.04774 73.0454 5.04774ZM77.4686 16.3064L77.4686 4.07883L79.077 4.07883L79.077 14.8337L82.255 14.8337L82.255 16.3064L77.4686 16.3064ZM75.2983 8.01258L75.2983 6.53985L81.6543 6.53985L81.6543 8.01258L75.2983 8.01258ZM83.8051 16.3064L83.8051 2.74175L85.4135 2.74175L85.4135 8.05134L85.5104 8.05134C85.8075 7.54751 86.2403 7.14057 86.8087 6.83052C87.39 6.50755 88.0554 6.34607 88.8046 6.34607C89.5927 6.34607 90.2645 6.50755 90.82 6.83052C91.3884 7.14057 91.8212 7.6121 92.1183 8.24512C92.4154 8.86522 92.564 9.60804 92.564 10.4736L92.564 16.3064L90.9556 16.3064L90.9556 10.7449C90.9556 9.81474 90.7425 9.09775 90.3161 8.59392C89.8898 8.07717 89.2633 7.8188 88.4365 7.8188C87.868 7.8188 87.3513 7.94799 86.8862 8.20636C86.4211 8.46474 86.0594 8.83292 85.801 9.31091C85.5427 9.7889 85.4135 10.338 85.4135 10.958L85.4135 16.3064L83.8051 16.3064ZM99.1441 16.3064L99.1441 2.74175L100.752 2.74175L100.752 14.8337L103 14.8337L103 16.3064L99.1441 16.3064ZM108.276 16.5002C107.333 16.5002 106.48 16.287 105.718 15.8607C104.969 15.4215 104.375 14.8143 103.935 14.0392C103.509 13.264 103.296 12.392 103.296 11.4231C103.296 10.4542 103.509 9.5822 103.935 8.80708C104.375 8.03196 104.969 7.43124 105.718 7.00492C106.48 6.56569 107.333 6.34607 108.276 6.34607C109.232 6.34607 110.085 6.56569 110.834 7.00492C111.596 7.43124 112.19 8.03196 112.617 8.80708C113.043 9.5822 113.256 10.4542 113.256 11.4231C113.256 12.392 113.043 13.264 112.617 14.0392C112.19 14.8143 111.596 15.4215 110.834 15.8607C110.085 16.287 109.232 16.5002 108.276 16.5002ZM108.276 15.0274C108.948 15.0274 109.529 14.8789 110.02 14.5817C110.524 14.2846 110.911 13.8648 111.183 13.3222C111.454 12.7796 111.59 12.1466 111.59 11.4231C111.59 10.6997 111.454 10.0667 111.183 9.52407C110.911 8.98148 110.524 8.56163 110.02 8.2645C109.529 7.96737 108.948 7.8188 108.276 7.8188C107.617 7.8188 107.036 7.96737 106.532 8.2645C106.041 8.56163 105.66 8.98148 105.389 9.52407C105.117 10.0667 104.982 10.6997 104.982 11.4231C104.982 12.1466 105.117 12.7796 105.389 13.3222C105.66 13.8648 106.041 14.2846 106.532 14.5817C107.036 14.8789 107.617 15.0274 108.276 15.0274ZM116.432 16.3064L113.642 6.53985L115.347 6.53985L117.673 14.8337L119.145 14.8337L121.49 6.53985L123.157 6.53985L120.366 16.3064L116.432 16.3064ZM128.574 16.5002C127.644 16.5002 126.792 16.2806 126.016 15.8413C125.254 15.3892 124.647 14.7755 124.195 14.0004C123.756 13.2253 123.536 12.3662 123.536 11.4231C123.536 10.4801 123.756 9.62096 124.195 8.84584C124.647 8.07072 125.254 7.46354 126.016 7.0243C126.792 6.57214 127.644 6.34607 128.574 6.34607C129.479 6.34607 130.305 6.56569 131.055 7.00492C131.804 7.44416 132.398 8.0578 132.838 8.84584C133.277 9.63388 133.496 10.5317 133.496 11.5394C133.496 11.6169 133.496 11.688 133.496 11.7525C133.496 11.8042 133.496 11.8624 133.496 11.927L124.447 11.927L124.447 10.5899L132.508 10.5899L131.869 11.0549C131.83 10.4607 131.668 9.91809 131.384 9.42718C131.1 8.92335 130.712 8.52933 130.221 8.24512C129.743 7.96091 129.194 7.8188 128.574 7.8188C127.915 7.8188 127.334 7.97382 126.83 8.28387C126.326 8.581 125.932 9.00732 125.648 9.56283C125.364 10.1054 125.222 10.7255 125.222 11.4231C125.222 12.1207 125.364 12.7473 125.648 13.3028C125.932 13.8454 126.326 14.2717 126.83 14.5817C127.334 14.8789 127.915 15.0274 128.574 15.0274C129.311 15.0274 129.931 14.8595 130.435 14.5236C130.951 14.1877 131.332 13.7356 131.578 13.1671L133.264 13.1671C133.083 13.7614 132.779 14.3169 132.353 14.8337C131.927 15.3375 131.391 15.7444 130.745 16.0545C130.099 16.3516 129.375 16.5002 128.574 16.5002ZM144.137 16.5002C143.401 16.5002 142.722 16.3387 142.102 16.0157C141.495 15.6798 141.023 15.2341 140.688 14.6786L140.591 14.6786L140.591 16.3064L139.06 16.3064L139.06 2.74175L140.668 2.74175L140.668 8.10947L140.765 8.10947C141.075 7.59272 141.527 7.17286 142.122 6.8499C142.729 6.51401 143.401 6.34607 144.137 6.34607C144.977 6.34607 145.739 6.55923 146.424 6.98554C147.121 7.41186 147.67 8.01258 148.071 8.7877C148.471 9.54991 148.671 10.4284 148.671 11.4231C148.671 12.4179 148.471 13.3028 148.071 14.0779C147.67 14.8401 147.121 15.4344 146.424 15.8607C145.739 16.287 144.977 16.5002 144.137 16.5002ZM143.788 15.0274C144.434 15.0274 144.996 14.8853 145.474 14.6011C145.965 14.3169 146.34 13.9035 146.598 13.3609C146.869 12.8054 147.005 12.1595 147.005 11.4231C147.005 10.6738 146.869 10.0279 146.598 9.48531C146.34 8.94273 145.965 8.52933 145.474 8.24512C144.996 7.96091 144.434 7.8188 143.788 7.8188C143.168 7.8188 142.625 7.96737 142.16 8.2645C141.695 8.54871 141.327 8.96211 141.056 9.50469C140.797 10.0473 140.668 10.6868 140.668 11.4231C140.668 12.1595 140.797 12.799 141.056 13.3415C141.327 13.8841 141.695 14.304 142.16 14.6011C142.625 14.8853 143.168 15.0274 143.788 15.0274ZM152.945 19.9882L154.244 15.6475L154.728 16.3064L151.938 16.3064L149.031 6.53985L150.736 6.53985L153.159 14.8337L155.232 14.8337L154.341 15.3375L156.918 6.53985L158.623 6.53985L154.651 19.9882L152.945 19.9882Z" fill="#8F8796"/>
+<path d="M245.542 6.88462V14.3579H249.024V15.9715H243.78V6.88462H241.402V5.27107H243.78V2.20447H245.542V5.27107H248.366V6.88462H245.542Z" fill="#8F8796"/>
+<path d="M231.806 15.9712V5.27078H233.483V6.99049H233.589C233.943 6.41017 234.438 5.94309 235.075 5.58925C235.712 5.2354 236.448 5.05847 237.283 5.05847C238.571 5.05847 239.576 5.45478 240.298 6.2474C241.034 7.02587 241.402 8.13696 241.402 9.58066V15.9712H239.64V9.87789C239.64 8.85881 239.406 8.07326 238.939 7.52126C238.472 6.9551 237.786 6.67202 236.88 6.67202C235.917 6.67202 235.125 6.99049 234.502 7.62742C233.879 8.26434 233.568 9.09235 233.568 10.1114V15.9712H231.806Z" fill="#8F8796"/>
+<path d="M230.684 11.173H221.64C221.753 12.1921 222.142 13.013 222.808 13.6358C223.473 14.2585 224.301 14.5699 225.292 14.5699C226.112 14.5699 226.799 14.3859 227.351 14.0179C227.917 13.6358 228.328 13.1404 228.582 12.5318H230.429C230.104 13.5508 229.488 14.4142 228.582 15.1219C227.691 15.8296 226.594 16.1835 225.292 16.1835C224.272 16.1835 223.338 15.9429 222.489 15.4616C221.654 14.9662 220.989 14.2939 220.493 13.4447C220.012 12.5955 219.771 11.6542 219.771 10.621C219.771 9.58774 220.012 8.6465 220.493 7.79726C220.989 6.94802 221.654 6.28279 222.489 5.80155C223.338 5.30617 224.272 5.05847 225.292 5.05847C226.296 5.05847 227.209 5.29909 228.03 5.78032C228.851 6.26156 229.495 6.93387 229.962 7.79726C230.444 8.66065 230.684 9.64435 230.684 10.7484V11.173ZM225.292 6.67202C224.357 6.67202 223.565 6.94802 222.914 7.50003C222.277 8.05203 221.873 8.78804 221.703 9.70805H228.837C228.667 8.81635 228.264 8.08742 227.627 7.52126C227.004 6.9551 226.226 6.67202 225.292 6.67202Z" fill="#8F8796"/>
+<path d="M213.779 16.1835C212.746 16.1835 211.804 15.9429 210.955 15.4616C210.12 14.9804 209.462 14.3152 208.981 13.4659C208.499 12.6167 208.259 11.6684 208.259 10.621C208.259 9.57358 208.499 8.62527 208.981 7.77603C209.462 6.92679 210.12 6.26156 210.955 5.78032C211.804 5.29909 212.746 5.05847 213.779 5.05847C214.699 5.05847 215.513 5.24247 216.22 5.61048C216.942 5.97848 217.523 6.45971 217.961 7.05418C218.414 7.63449 218.719 8.25726 218.874 8.9225H217.07C216.843 8.28557 216.44 7.7548 215.859 7.33018C215.279 6.89141 214.586 6.67202 213.779 6.67202C212.689 6.67202 211.804 7.04002 211.125 7.77603C210.446 8.49788 210.106 9.4462 210.106 10.621C210.106 11.7958 210.446 12.7511 211.125 13.4872C211.804 14.209 212.689 14.5699 213.779 14.5699C214.586 14.5699 215.279 14.3576 215.859 13.933C216.44 13.4942 216.843 12.9564 217.07 12.3195H218.874C218.719 12.9847 218.414 13.6145 217.961 14.209C217.523 14.7893 216.942 15.2635 216.22 15.6315C215.513 15.9995 214.699 16.1835 213.779 16.1835Z" fill="#8F8796"/>
+<path d="M189.766 16.1829C188.831 16.1829 187.982 15.9494 187.218 15.4823C186.468 15.0152 185.873 14.3642 185.435 13.5291C184.996 12.6798 184.776 11.7103 184.776 10.6204C184.776 9.53057 184.996 8.56808 185.435 7.73299C185.873 6.88375 186.468 6.22559 187.218 5.75851C187.982 5.29143 188.831 5.0579 189.766 5.0579C190.572 5.0579 191.301 5.24189 191.952 5.60989C192.618 5.96374 193.12 6.42375 193.46 6.98991H193.566L193.566 2.20448H195.328L195.328 15.9706H193.651V14.1872H193.545C193.177 14.7958 192.653 15.2842 191.974 15.6522C191.294 16.006 190.558 16.1829 189.766 16.1829ZM190.148 14.5694C191.167 14.5694 191.988 14.2155 192.611 13.5078C193.248 12.8001 193.566 11.8377 193.566 10.6204C193.566 9.40318 193.248 8.44069 192.611 7.73299C191.988 7.02529 191.167 6.67144 190.148 6.67144C189.072 6.67144 188.216 7.02529 187.579 7.73299C186.942 8.42654 186.623 9.38903 186.623 10.6204C186.623 11.8377 186.942 12.8001 187.579 13.5078C188.216 14.2155 189.072 14.5694 190.148 14.5694Z" fill="#8F8796"/>
+<path d="M207.362 11.1725H198.318C198.431 12.1916 198.82 13.0125 199.485 13.6353C200.15 14.2581 200.978 14.5694 201.969 14.5694C202.79 14.5694 203.477 14.3854 204.029 14.0174C204.595 13.6353 205.005 13.1399 205.26 12.5313H207.107C206.782 13.5504 206.166 14.4137 205.26 15.1214C204.368 15.8291 203.271 16.183 201.969 16.183C200.95 16.183 200.016 15.9424 199.167 15.4611C198.332 14.9658 197.666 14.2934 197.171 13.4442C196.69 12.595 196.449 11.6537 196.449 10.6205C196.449 9.58725 196.69 8.64601 197.171 7.79677C197.666 6.94754 198.332 6.2823 199.167 5.80107C200.016 5.30568 200.95 5.05798 201.969 5.05798C202.974 5.05798 203.887 5.2986 204.708 5.77984C205.529 6.26107 206.173 6.93338 206.64 7.79677C207.121 8.66016 207.362 9.64387 207.362 10.7479V11.1725ZM201.969 6.67153C201.035 6.67153 200.242 6.94754 199.591 7.49954C198.954 8.05154 198.551 8.78755 198.381 9.70756H205.515C205.345 8.81586 204.942 8.08693 204.305 7.52077C203.682 6.95461 202.903 6.67153 201.969 6.67153Z" fill="#8F8796"/>
+<path d="M177.357 0.484253H174.492C174.172 0.484253 173.913 0.743652 173.913 1.06392V3.34634C173.913 3.66661 173.653 3.92601 173.333 3.92601H170.469C170.238 3.92601 170.017 4.01767 169.854 4.1807L166.922 7.11307C166.759 7.2761 166.667 7.49746 166.667 7.72788V13.6716C166.667 13.9919 166.926 14.2513 167.247 14.2513H169.71C170.03 14.2513 170.29 13.9919 170.29 13.6716V7.94743C170.29 7.62716 170.549 7.36776 170.87 7.36776H173.333C173.653 7.36776 173.913 7.10836 173.913 6.7881V4.65059C173.913 4.33032 174.172 4.07092 174.492 4.07092H176.956C177.276 4.07092 177.536 4.33032 177.536 4.65059V13.6716C177.536 13.9919 177.276 14.2513 176.956 14.2513H170.87C170.549 14.2513 170.29 14.5107 170.29 14.8309V17.1134C170.29 17.4336 170.549 17.693 170.87 17.693H177.338C177.567 17.693 177.787 17.6021 177.951 17.4401L180.902 14.5063C181.066 14.3433 181.159 14.1212 181.159 13.8897V4.16621C181.159 4.01259 181.097 3.86514 180.989 3.75646L177.972 0.738943C177.808 0.575912 177.587 0.484253 177.357 0.484253Z" fill="#8F8796"/>
+<path d="M256.6 16.3064L256.6 2.74175L261.019 2.74175C262.349 2.74175 263.544 3.03242 264.603 3.61376C265.663 4.1951 266.49 5.00252 267.084 6.03602C267.691 7.0566 267.995 8.21928 267.995 9.52407C267.995 10.8289 267.691 11.998 267.084 13.0315C266.49 14.0521 265.663 14.853 264.603 15.4344C263.544 16.0157 262.349 16.3064 261.019 16.3064L256.6 16.3064ZM261.019 14.6399C262.026 14.6399 262.924 14.4267 263.712 14.0004C264.5 13.5741 265.107 12.9734 265.534 12.1982C265.973 11.4231 266.192 10.5317 266.192 9.52407C266.192 8.51641 265.973 7.62502 265.534 6.8499C265.107 6.07478 264.5 5.47406 263.712 5.04774C262.924 4.62142 262.026 4.40826 261.019 4.40826L258.344 4.40826L258.344 14.6399L261.019 14.6399ZM268.101 16.3064L272.073 2.74175L276.666 2.74175L280.638 16.3064L278.836 16.3064L275.368 4.35013L273.333 4.35013L269.884 16.3064L268.101 16.3064ZM270.271 12.3533L270.775 10.6868L277.964 10.6868L278.468 12.3533L270.271 12.3533ZM287.715 16.5196C286.423 16.5196 285.241 16.216 284.169 15.6088C283.109 15.0016 282.27 14.1683 281.649 13.109C281.042 12.0368 280.739 10.8418 280.739 9.52407C280.739 8.20636 281.042 7.01784 281.65 5.95851C282.27 4.88625 283.109 4.04654 284.169 3.43936C285.241 2.83218 286.423 2.52859 287.715 2.52859C288.994 2.52859 290.163 2.83218 291.222 3.43936C292.295 4.04654 293.134 4.88625 293.741 5.95851C294.362 7.01784 294.672 8.20636 294.672 9.52407C294.672 10.8418 294.362 12.0368 293.741 13.109C293.134 14.1683 292.295 15.0016 291.222 15.6088C290.163 16.216 288.994 16.5196 287.715 16.5196ZM287.715 14.853C288.684 14.853 289.556 14.627 290.331 14.1748C291.119 13.7097 291.733 13.0767 292.172 12.2758C292.624 11.4748 292.85 10.5576 292.85 9.52407C292.85 8.49057 292.624 7.57335 292.172 6.77239C291.733 5.97143 291.119 5.34487 290.331 4.89271C289.556 4.42764 288.684 4.1951 287.715 4.1951C286.733 4.1951 285.848 4.42764 285.06 4.89271C284.285 5.34487 283.671 5.97143 283.219 6.77239C282.78 7.57335 282.56 8.49057 282.56 9.52407C282.56 10.5576 282.78 11.4748 283.219 12.2758C283.671 13.0767 284.285 13.7097 285.06 14.1748C285.848 14.627 286.733 14.853 287.715 14.853Z" fill="#8F8796"/>
+</svg>
diff --git a/public/images/fractal-text-logo.svg b/public/images/fractal-text-logo.svg
deleted file mode 100644
index 5867001e54..0000000000
--- a/public/images/fractal-text-logo.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="252" height="48" viewBox="0 0 252 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M44.6308 0.0499588V7.14489H9.59803V20.7556H38.3033V27.5609H9.59803V46.9633H0.80127V27.5609H9.59803V20.7556H0.80127V0.0499588H44.6308Z" fill="#EAE9E5"/>
-<path d="M49.0356 10.9095H57.6009V46.9633H49.0356V10.9095ZM71.4905 17.7873C68.7126 17.7873 66.3205 18.3423 64.3142 19.4524C62.3594 20.5625 60.7904 21.9139 59.6072 23.5067C58.424 25.0994 57.6009 26.6439 57.1379 28.1401L57.0607 24.0858C57.1122 23.5549 57.2922 22.7586 57.6009 21.6967C57.9096 20.5866 58.3725 19.38 58.9899 18.0769C59.6586 16.7737 60.5331 15.5188 61.6135 14.3122C62.7452 13.0573 64.1084 12.0438 65.7032 11.2715C67.3493 10.4993 69.2785 10.1132 71.4905 10.1132V17.7873Z" fill="#EAE9E5"/>
-<path d="M95.0465 47.7596C91.5484 47.7596 88.3332 46.9632 85.401 45.3705C82.5202 43.7778 80.2052 41.5818 78.4562 38.7825C76.7585 35.9349 75.9097 32.677 75.9097 29.0089C75.9097 25.2442 76.7843 21.9622 78.5333 19.1628C80.2824 16.3152 82.6488 14.095 85.6325 12.5023C88.6162 10.9095 91.96 10.1132 95.6639 10.1132C99.7793 10.1132 103.046 10.9578 105.464 12.6471C107.882 14.3363 109.605 16.6048 110.634 19.4524C111.663 22.3 112.177 25.4855 112.177 29.0089C112.177 30.9877 111.868 33.0872 111.251 35.3074C110.634 37.4793 109.656 39.5065 108.319 41.3888C107.033 43.2711 105.284 44.8155 103.072 46.0221C100.911 47.1804 98.236 47.7596 95.0465 47.7596ZM97.6701 41.0992C100.551 41.0992 102.995 40.5924 105.001 39.5789C107.059 38.517 108.602 37.0691 109.631 35.235C110.711 33.401 111.251 31.3256 111.251 29.0089C111.251 26.4508 110.711 24.2789 109.631 22.4931C108.55 20.659 107.007 19.2594 105.001 18.2941C102.995 17.2805 100.551 16.7737 97.6701 16.7737C93.5547 16.7737 90.3652 17.9079 88.1017 20.1764C85.8382 22.4448 84.7065 25.389 84.7065 29.0089C84.7065 31.3738 85.2466 33.4734 86.3269 35.3074C87.4587 37.1415 89.002 38.5653 90.9568 39.5789C92.9117 40.5924 95.1494 41.0992 97.6701 41.0992ZM111.251 10.9095H119.894V46.9633H111.868C111.868 46.9633 111.817 46.5047 111.714 45.5877C111.611 44.6707 111.508 43.5607 111.405 42.2575C111.303 40.9061 111.251 39.6271 111.251 38.4205V10.9095Z" fill="#EAE9E5"/>
-<path d="M167.634 32.9907C167.325 36.0797 166.27 38.7342 164.47 40.9544C162.669 43.1746 160.251 44.8637 157.216 46.0221C154.233 47.1804 150.786 47.7596 146.876 47.7596C142.658 47.7596 138.825 47.0356 135.379 45.5877C131.984 44.1398 129.283 42.0162 127.276 39.2169C125.27 36.4175 124.267 33.0148 124.267 29.0089C124.267 25.0029 125.27 21.6002 127.276 18.8008C129.283 16.0015 131.984 13.8537 135.379 12.3575C138.825 10.8613 142.658 10.1132 146.876 10.1132C150.786 10.1132 154.233 10.7165 157.216 11.9231C160.2 13.0815 162.592 14.7466 164.393 16.9185C166.193 19.0904 167.248 21.7209 167.556 24.8098H159.686C158.811 22.2518 157.216 20.2729 154.901 18.8732C152.638 17.4253 149.963 16.7013 146.876 16.7013C144.356 16.7013 142.041 17.184 139.931 18.1493C137.822 19.0663 136.125 20.4418 134.839 22.2759C133.604 24.0617 132.987 26.306 132.987 29.0089C132.987 31.6634 133.604 33.9077 134.839 35.7418C136.125 37.5759 137.822 38.9514 139.931 39.8684C142.041 40.7372 144.356 41.1716 146.876 41.1716C150.272 41.1716 153.049 40.4718 155.21 39.0721C157.422 37.6241 158.94 35.597 159.763 32.9907H167.634Z" fill="#EAE9E5"/>
-<path d="M180.602 10.9361H189.862V17.5243H180.602V10.9361ZM171.96 0.0281689H180.602V46.9898H171.96V17.5243H180.602V10.9361H171.96V0.0281689Z" fill="#EAE9E5"/>
-<path d="M213.421 47.7596C209.923 47.7596 206.656 46.9632 203.775 45.3705C200.895 43.7778 198.58 41.5818 196.831 38.7825C195.133 35.9349 194.284 32.677 194.284 29.0089C194.284 25.2442 195.159 21.9622 196.908 19.1628C198.657 16.3152 201.023 14.095 204.007 12.5023C206.991 10.9095 210.334 10.1132 214.038 10.1132C218.154 10.1132 221.42 10.9578 223.838 12.6471C226.256 14.3363 227.979 16.6048 229.008 19.4524C230.037 22.3 230.551 25.4855 230.551 29.0089C230.551 30.9877 230.243 33.0872 229.626 35.3074C229.008 37.4793 228.031 39.5065 226.693 41.3888C225.407 43.2711 223.658 44.8155 221.446 46.0221C219.285 47.1804 216.61 47.7596 213.421 47.7596ZM216.045 41.0992C218.925 41.0992 221.369 40.5924 223.375 39.5789C225.433 38.517 226.976 37.0691 228.005 35.235C229.085 33.401 229.626 31.3256 229.626 29.0089C229.626 26.4508 229.085 24.2789 228.005 22.4931C226.925 20.659 225.381 19.2594 223.375 18.2941C221.369 17.2805 218.925 16.7737 216.045 16.7737C211.929 16.7737 208.74 17.9079 206.476 20.1764C204.213 22.4448 203.081 25.389 203.081 29.0089C203.081 31.3738 203.621 33.4734 204.701 35.3074C205.833 37.1415 207.376 38.5653 209.331 39.5789C211.286 40.5924 213.524 41.0992 216.045 41.0992ZM229.626 10.9095H238.268V46.9633H230.243C230.243 46.9633 230.191 46.5047 230.089 45.5877C229.986 44.6707 229.883 43.5607 229.78 42.2575C229.677 40.9061 229.626 39.6271 229.626 38.4205V10.9095Z" fill="#EAE9E5"/>
-<path d="M242.633 -3.43985e-05H251.199V46.9618H242.633V-3.43985e-05Z" fill="#EAE9E5"/>
-</svg>
diff --git a/public/images/hero_image.png b/public/images/hero_image.png
index 7f54fdd119..a7261f5f22 100644
Binary files a/public/images/hero_image.png and b/public/images/hero_image.png differ
diff --git a/public/images/icon-awakevc.svg b/public/images/icon-awakevc.svg
deleted file mode 100644
index e997e8b0ac..0000000000
--- a/public/images/icon-awakevc.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.5588 19.6958C24.6664 16.7436 20.552 15.2969 17.2001 15.0726C12.8906 14.7754 9.60459 17.3842 7.10776 20.5744C12.1406 26.6012 20.7666 27.1526 26.2415 21.2645C26.5718 20.898 27.1001 21.4362 26.7831 21.8061C21.4464 28.0806 10.9977 27.6249 6.56249 20.5511H6.56226C6.52886 20.4885 6.52886 20.4132 6.56295 20.3505C6.59681 20.2881 6.65993 20.2468 6.73088 20.2409C8.42813 16.3969 13.0479 13.7481 17.1994 14.0353C20.8618 14.2864 25.4058 15.9143 27.3937 19.2068C27.7142 19.7451 26.8918 20.2174 26.5582 19.6956L26.5588 19.6958ZM22.6091 7.08425C21.8574 8.33945 21.3499 9.72551 21.1131 11.1694C21.0208 11.6713 21.7736 11.8927 21.8892 11.384C22.2393 10.0072 22.6726 8.65298 23.187 7.3286C23.3126 6.98192 22.794 6.79377 22.6091 7.08425ZM29.0387 10.0563V10.0565C27.8459 10.9431 26.8731 12.0922 26.1954 13.4148C25.9279 13.9168 26.6874 14.366 26.9615 13.864C27.6436 12.6692 28.492 11.5773 29.4812 10.6211C29.7553 10.3403 29.3888 9.81857 29.0486 10.0597L29.0387 10.0563ZM7.84095 8.59008C8.34381 10.1745 9.04042 11.6907 9.91484 13.1046C10.0351 13.3142 10.3028 13.3868 10.5124 13.2663C10.7222 13.1461 10.7946 12.8784 10.6743 12.6685C9.84573 11.271 9.10559 9.82294 8.45832 8.33256C8.30652 8.00223 7.74489 8.23351 7.85735 8.58687L7.84095 8.59008ZM2.44144 12.7577C3.22417 14.2571 4.59778 15.5549 5.9419 16.5489C6.35148 16.8527 6.73111 16.1725 6.33812 15.8719C5.01729 14.8514 4.00322 13.6561 2.91019 12.3979C2.67891 12.1337 2.29259 12.4705 2.44465 12.7579L2.44144 12.7577ZM15.1786 6.09336C15.0943 7.74154 15.1586 9.39391 15.3702 11.0306C15.4265 11.4996 16.1694 11.506 16.1134 11.0306C15.9217 9.39574 15.839 7.74455 15.7301 6.09336C15.7147 5.95285 15.5958 5.84619 15.4544 5.84619C15.3129 5.84619 15.194 5.95285 15.1786 6.09336ZM20.7728 21.0366C20.67 21.9756 20.2351 22.8467 19.5468 23.4933C18.8583 24.14 17.9615 24.5196 17.018 24.5636C15.0364 24.6099 13.4514 23.0443 13.1376 21.1653C13.1012 20.9474 13.4283 20.835 13.4679 21.073V21.0727C13.6651 22.1045 14.2763 23.0102 15.1588 23.5795C14.7268 23.1909 14.446 22.6622 14.3661 22.0868C14.2929 21.3365 14.5529 20.5918 15.0777 20.0507C15.6024 19.5094 16.3384 19.2263 17.0908 19.2765C18.5736 19.4053 19.8548 20.9277 19.4586 22.437V22.4368C19.4159 22.5964 19.3549 22.7505 19.2768 22.8959C19.6984 22.4176 19.9633 21.8217 20.0363 21.1885C20.4426 17.4502 15.2975 16.5355 14.013 19.904C13.8612 20.3069 13.227 20.1516 13.3526 19.7225C14.6175 15.4687 21.1261 16.5487 20.7729 21.0367L20.7728 21.0366ZM16.1725 22.4897C16.343 22.6703 16.575 22.7804 16.8226 22.7982C17.0704 22.8159 17.3158 22.7399 17.51 22.5853C17.6982 22.4476 17.8352 22.2513 17.8997 22.0272C17.9644 21.803 17.9527 21.5637 17.8668 21.3469C17.7392 21.0737 17.4943 20.8736 17.2013 20.8028C16.908 20.7321 16.5989 20.7987 16.3607 20.9837C16.1267 21.1516 15.9733 21.4096 15.9375 21.6954C15.9018 21.9813 15.9869 22.2693 16.1725 22.4897Z" fill="#FECB00"/>
-</svg>
diff --git a/public/images/icon-decent.svg b/public/images/icon-decent.svg
deleted file mode 100644
index 7893d24e4b..0000000000
--- a/public/images/icon-decent.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.0765 3.76904V6.85643V9.94382H9.90702V13.0312H6.82227V28.4682H22.2461V25.3808H25.3308V6.85643V3.76904H16.0765ZM22.2461 25.3808H9.90702V16.1186H12.9918V22.2934H19.1613V16.1186H12.9918V13.0312H19.1613V9.94382V6.85643H22.2461V25.3808Z" fill="#AC54FF"/>
-</svg>
diff --git a/public/images/icon-govern.svg b/public/images/icon-govern.svg
deleted file mode 100644
index 2e4fb85a64..0000000000
--- a/public/images/icon-govern.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="36" cy="36" r="36" fill="#0E0E0E" fill-opacity="0.68"/>
-<path d="M52.7032 26.27C53.1992 26.2705 53.6763 26.4604 54.0369 26.8009C54.3976 27.1414 54.6146 27.6067 54.6437 28.1019C54.6727 28.597 54.5117 29.0845 54.1933 29.4649C53.875 29.8452 53.4234 30.0897 52.9309 30.1482L52.7032 30.1619V49.6213C53.1992 49.6219 53.6763 49.8118 54.0369 50.1523C54.3976 50.4927 54.6146 50.9581 54.6437 51.4532C54.6727 51.9483 54.5117 52.4359 54.1933 52.8162C53.875 53.1966 53.4234 53.441 52.9309 53.4996L52.7032 53.5132H17.6762C17.1802 53.5127 16.7032 53.3227 16.3425 52.9823C15.9819 52.6418 15.7648 52.1764 15.7358 51.6813C15.7067 51.1862 15.8678 50.6986 16.1861 50.3183C16.5045 49.9379 16.956 49.6935 17.4485 49.6349L17.6762 49.6213V30.1619C17.1802 30.1613 16.7032 29.9714 16.3425 29.6309C15.9819 29.2904 15.7648 28.8251 15.7358 28.33C15.7067 27.8348 15.8678 27.3473 16.1861 26.9669C16.5045 26.5866 16.956 26.3422 17.4485 26.2836L17.6762 26.27H52.7032ZM48.8113 30.1619H21.5681V49.6213H25.46V35.9997C25.46 35.4836 25.665 34.9886 26.03 34.6237C26.3949 34.2588 26.8898 34.0537 27.4059 34.0537C27.922 34.0537 28.417 34.2588 28.7819 34.6237C29.1469 34.9886 29.3519 35.4836 29.3519 35.9997V49.6213H33.2438V35.9997C33.2438 35.4836 33.4488 34.9886 33.8137 34.6237C34.1787 34.2588 34.6736 34.0537 35.1897 34.0537C35.7058 34.0537 36.2008 34.2588 36.5657 34.6237C36.9307 34.9886 37.1357 35.4836 37.1357 35.9997V49.6213H41.0276V35.9997C41.0276 35.4836 41.2326 34.9886 41.5975 34.6237C41.9625 34.2588 42.4574 34.0537 42.9735 34.0537C43.4896 34.0537 43.9846 34.2588 44.3495 34.6237C44.7144 34.9886 44.9195 35.4836 44.9195 35.9997V49.6213H48.8113V30.1619ZM46.8654 20.4321C47.3815 20.4321 47.8765 20.6371 48.2414 21.0021C48.6063 21.367 48.8113 21.862 48.8113 22.3781C48.8113 22.8942 48.6063 23.3891 48.2414 23.7541C47.8765 24.119 47.3815 24.324 46.8654 24.324H23.514C22.998 24.324 22.503 24.119 22.1381 23.7541C21.7731 23.3891 21.5681 22.8942 21.5681 22.3781C21.5681 21.862 21.7731 21.367 22.1381 21.0021C22.503 20.6371 22.998 20.4321 23.514 20.4321H46.8654Z" fill="#22C3F8"/>
-</svg>
diff --git a/public/images/icon-myosin.svg b/public/images/icon-myosin.svg
deleted file mode 100644
index 1f40756ebf..0000000000
--- a/public/images/icon-myosin.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="41" height="41" viewBox="0 0 41 41" fill="none">
-    <script xmlns="" type="text/javascript"/><script xmlns=""/>
-    <path d="M36.3244 0L24.0291 10.3551V0H18.1563L5.87274 10.3551V0H0V10.3779H5.84934L0 15.3111V25.6889L18.1563 10.3779H24.0057L0 30.6108V41H5.87274V36.0441L36.3244 10.3779H42.1971V0H36.3244Z" fill="#FFD400"/>
-    <path d="M42.197 30.6108H36.3242V40.9887H42.197V30.6108Z" fill="#FFD400"/>
-    <path d="M18.1562 40.9999H24.029V36.0554L42.197 20.7557V10.3778L18.1562 30.6107V40.9999Z" fill="#FFD400"/>
-</svg>
diff --git a/public/images/icon-operate.svg b/public/images/icon-operate.svg
deleted file mode 100644
index af25b4ae7d..0000000000
--- a/public/images/icon-operate.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="36" cy="36" r="36" fill="#0E0E0E" fill-opacity="0.68"/>
-<path d="M45.9032 44.762V53.1994H42.5283V44.762C42.5283 37.251 46.99 30.7812 53.4075 27.8601L54.8047 30.9313C52.1498 32.1389 49.8987 34.0852 48.3202 36.5377C46.7417 38.9902 45.9027 41.8454 45.9032 44.762ZM29.0284 44.762V53.1994H25.6534V44.762C25.6537 41.8456 24.8145 38.9909 23.236 36.5387C21.6575 34.0865 19.4066 32.1404 16.752 30.933L18.1492 27.8601C21.3937 29.3358 24.1448 31.7143 26.074 34.7114C28.0031 37.7085 29.0288 41.1976 29.0284 44.762ZM35.7783 36.3245C33.5406 36.3245 31.3945 35.4356 29.8122 33.8533C28.2298 32.271 27.3409 30.1249 27.3409 27.8871C27.3409 25.6494 28.2298 23.5033 29.8122 21.921C31.3945 20.3386 33.5406 19.4497 35.7783 19.4497C38.0161 19.4497 40.1622 20.3386 41.7445 21.921C43.3268 23.5033 44.2157 25.6494 44.2157 27.8871C44.2157 30.1249 43.3268 32.271 41.7445 33.8533C40.1622 35.4356 38.0161 36.3245 35.7783 36.3245ZM35.7783 32.9496C36.4431 32.9496 37.1014 32.8186 37.7156 32.5642C38.3298 32.3098 38.8879 31.9369 39.358 31.4668C39.8281 30.9967 40.201 30.4386 40.4554 29.8244C40.7098 29.2102 40.8408 28.5519 40.8408 27.8871C40.8408 27.2223 40.7098 26.564 40.4554 25.9498C40.201 25.3356 39.8281 24.7775 39.358 24.3074C38.8879 23.8373 38.3298 23.4644 37.7156 23.21C37.1014 22.9556 36.4431 22.8247 35.7783 22.8247C34.4357 22.8247 33.148 23.358 32.1986 24.3074C31.2492 25.2568 30.7159 26.5445 30.7159 27.8871C30.7159 29.2298 31.2492 30.5174 32.1986 31.4668C33.148 32.4162 34.4357 32.9496 35.7783 32.9496Z" fill="#66B6FF"/>
-</svg>
diff --git a/public/images/icon-structure.svg b/public/images/icon-structure.svg
deleted file mode 100644
index beeada2d73..0000000000
--- a/public/images/icon-structure.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="73" height="72" viewBox="0 0 73 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="36.5" cy="36" r="36" fill="#0E0E0E" fill-opacity="0.68"/>
-<path d="M50.1692 23.2228C47.9643 19.4509 44.9577 17.3735 41.6959 17.3735H32.9493C29.6875 17.3735 26.6809 19.4509 24.476 23.2228C22.2711 26.9948 21.2871 31.4046 21.2871 36.3245C21.2871 41.2445 22.4169 45.9094 24.476 49.4263C26.5351 52.9431 29.6875 55.2756 32.9493 55.2756H41.6959C44.9577 55.2756 47.9643 53.1982 50.1692 49.4263C52.3741 45.6543 53.3581 41.2445 53.3581 36.3245C53.3581 31.4046 52.2283 26.7397 50.1692 23.2228ZM50.4061 34.8668H44.575C44.4292 31.7326 43.8279 28.7259 42.8074 26.1202H48.3834C49.495 28.5619 50.2421 31.5868 50.4061 34.8668ZM46.6523 23.2046H41.4226C40.8055 22.1537 40.072 21.1757 39.2359 20.2891H41.6959C43.5181 20.2891 45.231 21.3824 46.6523 23.2046ZM24.2026 36.3245C24.2026 27.6326 28.2115 20.2891 32.9493 20.2891C37.687 20.2891 41.6959 27.6326 41.6959 36.3245C41.6959 45.0165 37.687 52.36 32.9493 52.36C28.2115 52.36 24.2026 45.0165 24.2026 36.3245ZM41.6959 52.36H39.2359C40.072 51.4734 40.8055 50.4954 41.4226 49.4445H46.6523C45.231 51.2667 43.5181 52.36 41.6959 52.36ZM48.3834 46.5289H42.8074C43.8279 43.9232 44.4292 40.9165 44.575 37.7823H50.4061C50.2421 41.0623 49.495 44.0872 48.3834 46.5289Z" fill="#22C3F8"/>
-</svg>
diff --git a/public/images/logo192.png b/public/images/logo192.png
deleted file mode 100644
index c40a8ee23e..0000000000
Binary files a/public/images/logo192.png and /dev/null differ
diff --git a/public/images/logo512.png b/public/images/logo512.png
deleted file mode 100644
index 96c5903e24..0000000000
Binary files a/public/images/logo512.png and /dev/null differ
diff --git a/public/images/shutter-icon-only-logo.svg b/public/images/shutter-icon-only-logo.svg
deleted file mode 100644
index 23e44bf15e..0000000000
--- a/public/images/shutter-icon-only-logo.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 29.5393L31.2621 29.5393L31.2621 34.7277L-4.53582e-07 34.7276L0 29.5393Z" fill="white"></path>
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 24.4586L31.2621 24.4586L31.2621 28.6093L3.62866e-07 28.6093L0 24.4586Z" fill="white"></path>
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 19.8232L31.2621 19.8232L31.2621 23.3253L-3.06168e-07 23.3253L0 19.8232Z" fill="white"></path>
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15.002L31.2621 15.002L31.2621 17.7259L-2.3813e-07 17.7258L0 15.002Z" fill="white"></path>
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.85645L31.2621 9.85645L31.2621 11.9318L-1.81433e-07 11.9318L0 9.85645Z" fill="white"></path>
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.73813L31.2621 3.73813L31.2621 4.77581L-9.07164e-08 4.7758L0 3.73813Z" fill="white"></path>
-</svg>
diff --git a/public/images/snapshot-icon.svg b/public/images/snapshot-icon.svg
deleted file mode 100644
index 63fb2f8b18..0000000000
--- a/public/images/snapshot-icon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="22" rx="4"/>
-<path d="M7.40603 11.4047L14.3439 5.39501C14.4213 5.31766 14.6455 5.32534 14.7152 5.39501C14.8682 5.54814 14.7616 5.78173 14.7152 5.85908L12.5572 10.0821H16.0842C16.4322 10.0821 16.6411 10.1053 16.6643 10.3374C16.6828 10.523 16.5947 10.6158 16.5482 10.639C14.3594 12.534 9.93985 16.361 9.77279 16.5095C9.56395 16.6952 9.33192 16.7184 9.19269 16.6256C9.08132 16.5513 9.14629 16.3162 9.19269 16.2079L11.3042 11.9616H7.8469C7.17863 11.9616 7.27454 11.5904 7.40603 11.4047Z" fill="#FABD2E"/>
-</svg>
diff --git a/public/images/tools.svg b/public/images/tools.svg
new file mode 100644
index 0000000000..1b569baddb
--- /dev/null
+++ b/public/images/tools.svg
@@ -0,0 +1,102 @@
+<svg width="111" height="129" viewBox="0 0 111 129" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.6941 18.2742L65.0938 17.6036L67.3088 2.10848C67.4925 0.825274 68.6708 -0.0656263 69.9409 0.119897C71.211 0.305421 72.0929 1.49586 71.9092 2.77907L69.6941 18.2742Z" fill="#F8F4FC"/>
+<path d="M69.6942 18.3709C69.6942 18.3709 69.6846 18.3709 69.6808 18.3709L65.0823 17.7003C65.0307 17.6926 64.9943 17.6442 65.002 17.5901L67.2171 2.09504C67.3089 1.44957 67.6456 0.877542 68.1639 0.48717C68.6823 0.0967971 69.3174 -0.0674687 69.9582 0.0252932C70.597 0.118055 71.1633 0.458182 71.5497 0.979967C71.936 1.50368 72.0987 2.14722 72.0069 2.79269L69.7918 18.2878C69.7879 18.3129 69.7746 18.3361 69.7535 18.3516C69.7363 18.3631 69.7172 18.3709 69.6961 18.3709H69.6942ZM65.2029 17.5206L69.612 18.1641L71.8137 2.76563C71.8997 2.17041 71.7486 1.57712 71.3928 1.09592C71.037 0.614717 70.5167 0.301646 69.9276 0.216614C69.3384 0.131583 68.7512 0.282321 68.2749 0.641773C67.7986 1.00122 67.4887 1.52688 67.4045 2.1221L65.2048 17.5206H65.2029Z" fill="#501464"/>
+<path d="M71.7433 3.56571C70.4464 2.3772 68.9754 2.16462 67.2462 2.91251L67.1716 2.73472C68.9525 1.96557 70.5325 2.19554 71.8734 3.4227L71.7452 3.56571H71.7433Z" fill="#501464"/>
+<path d="M71.4411 5.67997C70.1442 4.49146 68.6732 4.27888 66.944 5.02677L66.8694 4.84898C68.6502 4.07983 70.2303 4.3098 71.5712 5.53696L71.443 5.67997H71.4411Z" fill="#501464"/>
+<path d="M71.1394 7.79398C69.8424 6.60547 68.3715 6.39289 66.6423 7.14079L66.5676 6.96299C68.3485 6.19384 69.9304 6.42381 71.2694 7.65098L71.1413 7.79398H71.1394Z" fill="#501464"/>
+<path d="M70.8368 9.9064C69.5399 8.71789 68.0689 8.50531 66.3397 9.2532L66.2651 9.07541C68.046 8.30433 69.6279 8.53623 70.9669 9.76339L70.8387 9.9064H70.8368Z" fill="#501464"/>
+<path d="M72.9698 19.092C73.3233 16.6201 71.1068 14.251 68.0192 13.8004C64.9316 13.3498 62.1421 14.9883 61.7886 17.4601C61.4352 19.932 63.6517 22.3011 66.7393 22.7517C69.8269 23.2023 72.6164 21.5638 72.9698 19.092Z" fill="#F8F4FC"/>
+<path d="M67.7223 22.9162C67.3857 22.9162 67.0414 22.8911 66.6952 22.8408C65.1802 22.6205 63.824 21.9383 62.8733 20.9238C61.9169 19.9034 61.4884 18.6646 61.6625 17.4394C61.8384 16.2142 62.5959 15.1493 63.7991 14.444C64.9946 13.7424 66.4866 13.4758 68.0016 13.698C71.1367 14.156 73.3939 16.5775 73.0343 19.0994C72.7129 21.3412 70.429 22.9162 67.7242 22.9162H67.7223ZM66.9629 13.8159C65.8497 13.8159 64.7861 14.0884 63.8947 14.6121C62.7432 15.2885 62.0182 16.3031 61.8518 17.4684C61.6854 18.6337 62.0967 19.8145 63.011 20.7923C63.9311 21.776 65.249 22.435 66.72 22.6514C69.7519 23.094 72.4968 21.4881 72.8411 19.0724C73.1854 16.6567 71.0009 14.3319 67.971 13.8912C67.6324 13.841 67.2939 13.8178 66.9591 13.8178L66.9629 13.8159Z" fill="#501464"/>
+<path d="M68.6313 20.2683C68.5453 20.2683 68.4592 20.2296 68.4018 20.1543L65.8348 16.7356C65.7392 16.6081 65.764 16.4264 65.8903 16.3298C66.0165 16.2332 66.1963 16.2583 66.2919 16.3858L68.859 19.8045C68.9546 19.932 68.9298 20.1137 68.8035 20.2103C68.7519 20.2509 68.6906 20.2702 68.6294 20.2702L68.6313 20.2683Z" fill="#501464"/>
+<path d="M65.6282 19.816C65.5402 19.816 65.4522 19.7735 65.3948 19.6962C65.3011 19.5667 65.3317 19.385 65.4599 19.2923L68.9011 16.778C69.0293 16.6833 69.209 16.7123 69.3009 16.8437C69.3946 16.9732 69.364 17.1549 69.2358 17.2476L65.7946 19.7619C65.743 19.7986 65.6856 19.816 65.6263 19.816H65.6282Z" fill="#501464"/>
+<path d="M70.5351 12.0204C69.2381 10.8319 67.7672 10.6193 66.038 11.3672L65.9634 11.1894C67.7442 10.4183 69.3262 10.6502 70.6652 11.8774L70.537 12.0204H70.5351Z" fill="#501464"/>
+<path d="M97.7094 96.1052L93.505 98.2001L91.573 101.816L93.0459 104.831L97.0591 105.482L101.265 103.387L103.197 99.7732L101.724 96.7565L97.7094 96.1052Z" fill="#F8F4FC"/>
+<path d="M97.0587 105.578C97.0587 105.578 97.0491 105.578 97.0434 105.578L93.0283 104.927C92.9977 104.921 92.971 104.902 92.9576 104.875L91.4847 101.858C91.4713 101.829 91.4713 101.796 91.4847 101.769L93.4166 98.1556C93.4262 98.1382 93.4415 98.1246 93.4587 98.115L97.6631 96.0201C97.6804 96.0104 97.7014 96.0085 97.7205 96.0104L101.736 96.6617C101.766 96.6675 101.793 96.6868 101.806 96.7139L103.279 99.7306C103.293 99.7596 103.293 99.7924 103.279 99.8195L101.347 103.433C101.338 103.451 101.322 103.464 101.305 103.474L97.1008 105.569C97.0874 105.575 97.074 105.578 97.0587 105.578ZM93.1087 104.744L97.0453 105.381L101.196 103.313L103.09 99.7692L101.661 96.8414L97.7244 96.2037L93.5735 98.2715L91.6798 101.816L93.1087 104.744Z" fill="#501464"/>
+<g style="mix-blend-mode:multiply">
+<path d="M97.7087 96.1052L93.5043 98.2001L91.5723 101.816L93.0452 104.831L97.0583 105.482L101.265 103.387L103.197 99.7732L101.724 96.7565L97.7087 96.1052Z" fill="#DCC8F0"/>
+</g>
+<path d="M96.3408 93.303L92.1363 95.3979L90.2043 99.0136L91.6772 102.03L95.6904 102.682L99.8967 100.585L101.829 96.9709L100.356 93.9542L96.3408 93.303Z" fill="#F8F4FC"/>
+<path d="M95.691 102.778C95.691 102.778 95.6815 102.778 95.6757 102.778L91.6607 102.127C91.63 102.121 91.6032 102.102 91.5899 102.075L90.117 99.0583C90.1036 99.0293 90.1036 98.9964 90.117 98.9694L92.049 95.3555C92.0585 95.3381 92.0738 95.3246 92.091 95.3149L96.2955 93.2201C96.3127 93.2104 96.3337 93.2085 96.3529 93.2104L100.368 93.8617C100.399 93.8675 100.425 93.8868 100.439 93.9138L101.912 96.9305C101.925 96.9595 101.925 96.9924 101.912 97.0194L99.9796 100.633C99.97 100.651 99.9548 100.664 99.9375 100.674L95.7331 102.769C95.7197 102.775 95.7063 102.778 95.691 102.778ZM91.741 101.944L95.6757 102.581L99.8266 100.513L101.72 96.9711L100.291 94.0433L96.3566 93.4056L92.2058 95.4734L90.3121 99.0177L91.741 101.945V101.944Z" fill="#501464"/>
+<path d="M96.6972 99.3987C97.856 98.8213 98.4927 97.7333 98.1194 96.9685C97.746 96.2036 96.504 96.0516 95.3453 96.6289C94.1865 97.2063 93.5497 98.2943 93.923 99.0592C94.2964 99.824 95.5384 99.976 96.6972 99.3987Z" fill="#F8F4FC"/>
+<path d="M95.2983 99.8217C94.6288 99.8217 94.0683 99.5647 93.8311 99.0796C93.636 98.6796 93.6857 98.1907 93.9707 97.7017C94.2481 97.2263 94.7187 96.807 95.2964 96.519C95.8721 96.2311 96.488 96.1113 97.0313 96.177C97.5879 96.2446 98.003 96.5036 98.1981 96.9036C98.5941 97.7153 97.938 98.8632 96.7329 99.4642C96.249 99.7058 95.7478 99.8217 95.2983 99.8217ZM96.7348 96.3528C96.3006 96.3528 95.83 96.4707 95.3824 96.693C94.8392 96.9635 94.3973 97.3578 94.1372 97.8003C93.8866 98.2313 93.8388 98.6545 94.0052 98.9946C94.3552 99.7116 95.5412 99.843 96.6506 99.2903C97.7601 98.7376 98.3779 97.7056 98.0279 96.9886C97.8614 96.6485 97.4999 96.4282 97.0103 96.3683C96.9204 96.3567 96.8285 96.3528 96.7367 96.3528H96.7348Z" fill="#501464"/>
+<path d="M99.9017 100.607L95.6968 102.702L97.0648 105.505L101.27 103.41L99.9017 100.607Z" fill="#F8F4FC"/>
+<path d="M97.0584 105.578C97.0239 105.578 96.9895 105.559 96.9723 105.524L95.6046 102.722C95.5931 102.699 95.5912 102.672 95.5988 102.649C95.6065 102.624 95.6237 102.604 95.6466 102.593L99.8511 100.498C99.874 100.486 99.8989 100.484 99.9238 100.492C99.9467 100.5 99.9678 100.517 99.9793 100.54L101.347 103.342C101.37 103.391 101.351 103.449 101.303 103.472L97.0985 105.567C97.0851 105.575 97.0698 105.576 97.0564 105.576L97.0584 105.578ZM95.8188 102.724L97.1023 105.352L101.135 103.342L99.8511 100.714L95.8188 102.724Z" fill="#501464"/>
+<path d="M94.4012 99.5778L94.2175 99.5236C94.4203 98.8202 95.0439 98.1496 95.8874 97.7283C96.731 97.307 97.6377 97.2162 98.3148 97.481L98.246 97.6607C97.6301 97.4172 96.7578 97.5099 95.9735 97.9003C95.1892 98.2907 94.5867 98.9342 94.4031 99.5758L94.4012 99.5778Z" fill="#501464"/>
+<path d="M93.9827 99.0174L93.7991 98.9633C94.0133 98.2193 94.6732 97.51 95.5646 97.0655C96.4579 96.621 97.4162 96.5225 98.1297 96.8046L98.0609 96.9844C97.4067 96.7273 96.4828 96.824 95.6488 97.2375C94.8167 97.653 94.1778 98.3333 93.9827 99.0155V99.0174Z" fill="#501464"/>
+<path d="M95.3365 99.7496L95.1528 99.6955C95.2886 99.2259 95.7037 98.7795 96.2642 98.4993C96.8246 98.221 97.4272 98.1592 97.8786 98.337L97.8098 98.5167C97.4138 98.3602 96.8534 98.4201 96.3484 98.6732C95.8434 98.9245 95.4551 99.338 95.3365 99.7496Z" fill="#501464"/>
+<g style="mix-blend-mode:multiply">
+<path d="M96.6972 99.3987C97.856 98.8213 98.4927 97.7333 98.1194 96.9685C97.746 96.2036 96.504 96.0516 95.3453 96.6289C94.1865 97.2063 93.5497 98.2943 93.923 99.0592C94.2964 99.824 95.5384 99.976 96.6972 99.3987Z" fill="#DCC8F0"/>
+</g>
+<path d="M110.405 13.9206L107.937 12.2451L104.815 14.2511L104.161 17.9306L104.167 17.9345L82.0601 51.2032L84.5162 52.869L106.623 19.6004L106.629 19.6042L109.75 17.5982L110.405 13.9206Z" fill="#F8F4FC"/>
+<path d="M84.5159 52.9653C84.4968 52.9653 84.4795 52.9595 84.4623 52.9499L82.0063 51.284C81.9852 51.2705 81.9699 51.2473 81.966 51.2222C81.9603 51.1971 81.9661 51.17 81.9814 51.1488L104.067 17.911L104.721 14.2334C104.725 14.2064 104.742 14.1832 104.763 14.1696L107.885 12.1637C107.918 12.1424 107.958 12.1443 107.99 12.1637L110.458 13.8372C110.49 13.8585 110.506 13.8972 110.498 13.9339L109.844 17.6134C109.84 17.6405 109.823 17.6637 109.802 17.6772L106.68 19.6812L84.5943 52.919C84.5752 52.946 84.5465 52.9615 84.514 52.9615L84.5159 52.9653ZM82.1918 51.1777L84.4891 52.7354L106.542 19.5479C106.556 19.5266 106.579 19.5112 106.603 19.5073L109.664 17.5419L110.299 13.9667L107.935 12.3627L104.901 14.3107L104.258 17.9226C104.26 17.9458 104.258 17.969 104.245 17.9883L82.1918 51.1758V51.1777Z" fill="#501464"/>
+<path d="M77.4153 46.752L83.8979 51.2374L67.6923 75.6279L62.8394 71.3937C62.191 70.8275 62.0609 69.8593 62.5392 69.1404L77.4153 46.752Z" fill="#FFE66D"/>
+<path d="M67.7115 75.7729L62.7764 71.4672C62.0916 70.8701 61.9557 69.8458 62.4588 69.0863L77.3886 46.6167L84.03 51.2123L67.7096 75.7729H67.7115ZM77.4402 46.8873L62.6176 69.1945C62.1662 69.8729 62.2886 70.7869 62.9007 71.3203L67.6732 75.483L83.766 51.2625L77.4402 46.8853V46.8873Z" fill="#501464"/>
+<path d="M89.8118 55.1586L83.9011 51.2336L67.6936 75.6261L72.7435 78.1674C73.5067 78.552 74.4345 78.3046 74.9088 77.5877L89.8137 55.1567L89.8118 55.1586Z" fill="#FFE66D"/>
+<path d="M73.4935 78.4458C73.2238 78.4458 72.9521 78.3839 72.6977 78.2564L67.5503 75.6668L83.8726 51.1023L89.944 55.1316L89.8904 55.2128L74.9855 77.6438C74.6431 78.1578 74.075 78.4439 73.4935 78.4439V78.4458ZM67.8315 75.5914L72.7838 78.0844C73.503 78.4458 74.3811 78.21 74.8268 77.5375L89.678 55.1877L83.9261 51.369L67.8315 75.5914Z" fill="#501464"/>
+<path d="M77.4148 46.752L83.8974 51.2374L89.0831 43.4319L87.593 42.6763C85.4985 45.7683 81.8296 46.7578 77.4148 46.752Z" fill="#FFE66D"/>
+<path d="M83.9247 51.3728L77.1055 46.6555H77.4154C77.4268 46.6555 77.4383 46.6555 77.4498 46.6555C82.4519 46.6555 85.6501 45.3742 87.5152 42.6223L87.563 42.5527L89.2253 43.3953L83.9247 51.3728ZM77.7233 46.8468L83.8731 51.1023L88.946 43.4688L87.6261 42.8001C85.7515 45.5114 82.5972 46.8005 77.7233 46.8468Z" fill="#501464"/>
+<path d="M89.8122 55.1588L83.8997 51.2376L89.0854 43.4321L90.2044 44.4467C88.1634 47.5736 88.4388 51.2396 89.8122 55.1588Z" fill="#FFE66D"/>
+<path d="M89.9957 55.3983L83.7637 51.2666L89.0661 43.2871L90.3285 44.4312L90.2826 44.5007C88.4597 47.2913 88.3392 50.6694 89.9 55.1278L89.9957 55.3983ZM84.0315 51.2105L89.6284 54.9229C88.1555 50.5708 88.3009 47.2391 90.0799 44.464L89.1024 43.5789L84.0315 51.2105Z" fill="#501464"/>
+<g style="mix-blend-mode:multiply">
+<path d="M73.2237 74.3043C72.4413 73.8946 72.185 72.8878 72.6766 72.1496L83.1877 56.3317C83.6353 55.6592 84.5305 55.4698 85.2077 55.9066C85.9059 56.3569 86.101 57.2999 85.6381 57.9937L75.127 73.8115C74.7081 74.4416 73.8894 74.6541 73.2237 74.3043Z" fill="#DCC8F0"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M66.8954 70.0121C66.113 69.6024 65.8567 68.5956 66.3483 67.8573L76.8593 52.0395C77.3069 51.367 78.2022 51.1776 78.8793 51.6143C79.5775 52.0646 79.7726 53.0077 79.3097 53.7015L68.7986 69.5193C68.3797 70.1493 67.561 70.3619 66.8954 70.0121Z" fill="#DCC8F0"/>
+</g>
+<path d="M4.56075 40.3187C7.96944 38.3958 14.2569 31.7981 14.2569 31.7981C21.1585 40.05 27.2088 48.0855 26.392 54.3701L20.6459 57.7618C20.6459 57.7618 18.513 48.6518 12.2619 45.8071C12.2619 45.8071 9.53034 44.2823 7.73609 45.5655L4.55884 40.3206L4.56075 40.3187Z" fill="#F8F4FC"/>
+<path d="M20.6455 57.8564C20.6321 57.8564 20.6206 57.8544 20.6072 57.8486C20.5785 57.837 20.5594 57.8119 20.5518 57.7829C20.5307 57.6921 18.3577 48.6865 12.2213 45.8939C12.1869 45.8746 9.51462 44.4098 7.79115 45.6427C7.77011 45.6582 7.74335 45.664 7.71657 45.6582C7.68979 45.6524 7.66874 45.6369 7.65343 45.6137L4.47623 40.3688C4.46284 40.3456 4.459 40.3186 4.46474 40.2934C4.47048 40.2683 4.48769 40.2471 4.51064 40.2335C7.86768 38.3397 14.1227 31.7961 14.1858 31.7304C14.2049 31.711 14.2317 31.6994 14.2585 31.7014C14.2853 31.7014 14.3102 31.7149 14.3293 31.7362C20.942 39.6422 27.327 47.9038 26.4873 54.3836C26.4835 54.4126 26.4662 54.4396 26.4414 54.4551L20.6952 57.8467C20.6799 57.8564 20.6646 57.8602 20.6474 57.8602L20.6455 57.8564ZM9.48978 44.9528C9.86661 44.9528 10.2702 45.005 10.6949 45.1074C11.6035 45.3296 12.2806 45.7026 12.3093 45.7181C18.1244 48.3657 20.4178 56.4978 20.7086 57.609L26.3056 54.3063C27.0956 47.9328 20.7985 39.7659 14.2547 31.9372C13.5431 32.6754 7.89637 38.4981 4.69618 40.3495L7.77014 45.4224C8.24643 45.1093 8.82985 44.9509 9.49361 44.9509L9.48978 44.9528Z" fill="#501464"/>
+<g style="mix-blend-mode:multiply">
+<path d="M14.1498 46.9338C18.6411 50.2906 20.4144 56.8458 20.6229 57.671L21.9217 57.0062L26.3901 54.3683C26.8033 51.1815 24.1941 45.9521 21.5774 41.7507L14.146 46.9319" fill="#DCC8F0"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M11.5364 45.4767C11.896 44.1587 11.6856 42.3614 10.8554 40.7052C10.096 39.1882 9.00379 38.1601 7.9479 37.8083C6.7256 38.85 5.52625 39.7718 4.55835 40.3187L7.7356 45.5636C8.95217 44.694 10.601 45.1153 11.5345 45.4767H11.5364Z" fill="#DCC8F0"/>
+</g>
+<path d="M42.3123 40.8868C42.3123 40.8868 35.7206 36.9753 26.7895 40.6046C21.7473 42.6531 39.2612 27.8054 39.2612 27.8054L50.8722 35.6689L42.3142 40.8868H42.3123Z" fill="#F8F4FC"/>
+<path d="M42.3124 40.9833C42.2952 40.9833 42.2799 40.9794 42.2646 40.9697C42.1996 40.9311 35.6079 37.1259 26.826 40.6934C26.2368 40.933 25.9251 40.9562 25.8161 40.7726C25.6975 40.5736 25.3837 40.0441 32.2795 33.7962C35.6614 30.7331 39.1639 27.7608 39.1983 27.7319C39.2308 27.7048 39.2767 27.7009 39.313 27.7261L50.924 35.5896C50.9508 35.6089 50.968 35.6398 50.9661 35.6727C50.9642 35.7055 50.947 35.7364 50.9202 35.7538L42.3622 40.9717C42.3468 40.9813 42.3296 40.9852 42.3124 40.9852V40.9833ZM34.4602 38.9696C35.7915 38.9696 36.9602 39.1087 37.9186 39.2904C40.4034 39.7619 42.014 40.6103 42.3124 40.7765L50.6945 35.6669L39.2691 27.927C38.81 28.3174 35.5562 31.0906 32.4096 33.9411C26.1202 39.6402 25.9002 40.5349 25.9824 40.6741C25.9844 40.6799 26.0647 40.7958 26.7572 40.5156C29.6398 39.3445 32.2738 38.9696 34.464 38.9696H34.4602Z" fill="#501464"/>
+<g style="mix-blend-mode:multiply">
+<path d="M42.3123 40.887C42.3123 40.887 35.7206 36.9756 26.7895 40.6049C21.7473 42.6534 39.2612 27.8057 39.2612 27.8057L50.8722 35.6692L42.3142 40.887H42.3123Z" fill="#DCC8F0"/>
+</g>
+<path d="M54.2981 34.2508C54.2981 34.2508 50.5891 28.9517 39.9461 26.5283C29.303 24.1069 14.2566 31.7964 14.2566 31.7964C12.3571 33.7212 14.9223 41.7065 17.5696 43.1926C25.5443 48.2501 26.208 54.4168 26.208 54.4168L32.8762 51.5083C32.8762 51.5083 26.3094 39.7082 35.208 34.3976C42.7254 30.5557 50.8684 35.6692 50.8684 35.6692L54.2943 34.2508" fill="#F8F4FC"/>
+<path d="M26.2079 54.5152C26.1907 54.5152 26.1754 54.5114 26.1601 54.5017C26.1333 54.4862 26.1161 54.4592 26.1122 54.4283C26.1046 54.3664 25.3567 48.2461 17.5178 43.2736C16.043 42.4465 14.1149 39.0839 13.6023 35.4043C13.3593 33.6612 13.5678 32.3567 14.1876 31.7287C14.1953 31.7209 14.2029 31.7151 14.2124 31.7113C14.2507 31.6919 18.0401 29.7671 23.0804 28.1631C27.7382 26.6809 34.4465 25.1793 39.9651 26.4354C50.5221 28.8376 54.3362 34.1424 54.3745 34.1946C54.3917 34.2178 54.3956 34.2487 54.3879 34.2777C54.3803 34.3067 54.3592 34.3299 54.3324 34.3395L50.9065 35.758C50.8778 35.7696 50.8453 35.7677 50.8205 35.7503C50.7401 35.7 42.6354 30.7121 35.2537 34.4825C31.6059 36.6605 30.1063 40.1739 30.8006 44.924C31.3209 48.4799 32.9449 51.4309 32.9602 51.4599C32.9736 51.4831 32.9755 51.5121 32.9679 51.5391C32.9602 51.5642 32.9392 51.5855 32.9143 51.5971L26.2462 54.5056C26.2347 54.5114 26.2213 54.5133 26.2079 54.5133V54.5152ZM14.3138 31.8755C13.7457 32.463 13.5602 33.7056 13.7935 35.3773C14.1914 38.2432 15.8613 42.1219 17.6173 43.1074C21.7586 45.7338 23.8991 48.6616 24.9645 50.6559C25.9458 52.4899 26.2213 53.864 26.2863 54.2794L32.7441 51.4637C32.4629 50.9304 31.0856 48.1939 30.6132 44.9607C30.1254 41.6348 30.5194 37.0876 35.1619 34.3163C42.3676 30.6329 50.2313 35.1744 50.8797 35.5628L54.1469 34.21C53.5749 33.4776 49.6115 28.8279 39.9268 26.6248C36.9045 25.9368 31.539 25.6779 23.1416 28.3487C18.2677 29.8985 14.5721 31.748 14.3157 31.8775L14.3138 31.8755Z" fill="#501464"/>
+<path d="M4.99884 38.5387L1.80249 40.1717L6.45832 49.4692L9.23577 47.7106C10.6704 46.725 10.8273 43.8783 9.56861 41.366C8.38838 39.0084 6.40287 37.8198 4.99884 38.5407V38.5387Z" fill="#F8F4FC"/>
+<path d="M6.45668 49.5659C6.45668 49.5659 6.43948 49.5659 6.43183 49.562C6.40505 49.5543 6.384 49.5369 6.37252 49.5118L1.71856 40.2143C1.69561 40.166 1.71286 40.1081 1.76068 40.0849L4.95704 38.4519C5.46394 38.191 6.06267 38.162 6.68434 38.3688C7.80527 38.7398 8.91468 39.8433 9.65495 41.3217C10.9327 43.8726 10.7682 46.7753 9.29152 47.7899L6.51024 49.5524C6.49494 49.562 6.47772 49.5678 6.45859 49.5678L6.45668 49.5659ZM1.93091 40.2143L6.49497 49.3301L9.18439 47.6276C10.5827 46.6671 10.7185 43.8765 9.48281 41.4087C8.76549 39.9747 7.69622 38.9079 6.62312 38.5524C6.04926 38.363 5.50219 38.3881 5.04119 38.6258L1.93091 40.2143Z" fill="#501464"/>
+<path d="M6.91947 43.0068C8.21063 45.5867 7.99637 48.4856 6.45844 49.4692C4.93773 50.4413 2.69587 49.1755 1.43148 46.6516C0.169006 44.1277 0.339266 41.2579 1.83128 40.2298C3.34243 39.1881 5.62638 40.4269 6.91947 43.0068Z" fill="#F8F4FC"/>
+<path d="M5.32243 49.8925C5.08715 49.8925 4.84421 49.8578 4.59745 49.7901C3.35985 49.4442 2.14328 48.2885 1.34754 46.6961C0.0659306 44.1355 0.25913 41.2 1.77984 40.1506C2.32883 39.7718 2.99451 39.6694 3.70609 39.8549C4.96091 40.1815 6.1947 41.343 7.00574 42.9644C8.31795 45.583 8.09413 48.5378 6.5103 49.5524C6.15451 49.7805 5.75282 49.8945 5.32243 49.8945V49.8925ZM3.03276 39.9574C2.61385 39.9574 2.22554 40.0752 1.88697 40.3091C0.442774 41.3043 0.278282 44.1297 1.5178 46.6072C2.29059 48.1513 3.46123 49.2722 4.64911 49.6027C5.29756 49.7824 5.90392 49.7089 6.407 49.3862C7.91049 48.4257 8.10177 45.583 6.83356 43.0494C6.04738 41.4783 4.85953 40.3535 3.65635 40.0405C3.44211 39.9844 3.23361 39.9574 3.03085 39.9574H3.03276Z" fill="#501464"/>
+<path d="M58.4605 103.689L32.0327 51.9102L26.208 54.4186L57.4237 116.768L61.9763 125.863L70.7486 119.294C65.6413 114.992 61.4598 109.681 58.4586 103.687L58.4605 103.689Z" fill="#CAFF8A"/>
+<path d="M61.9435 126.01L57.3392 116.813L26.0776 54.3704L32.0782 51.7866L32.1184 51.8659L58.5462 103.646C61.559 109.664 65.685 114.903 70.8114 119.223L70.9051 119.302L61.9435 126.012V126.01ZM26.3397 54.4671L62.0123 125.718L70.5972 119.29C65.4937 114.969 61.383 109.736 58.376 103.731L31.9902 52.0321L26.3397 54.4651V54.4671Z" fill="#501464"/>
+<path d="M21.5522 57.2591L47.433 109.965C50.2697 115.629 51.9951 121.794 52.5173 128.119L52.5575 128.614L61.9782 125.864L57.4257 116.77L26.21 54.4202L21.5542 57.261L21.5522 57.2591Z" fill="#CAFF8A"/>
+<path d="M52.4718 128.738L52.4221 128.125C51.8999 121.783 50.1917 115.686 47.3492 110.006L21.4302 57.2206L26.2486 54.2812L26.2946 54.374L62.1163 125.922L52.4737 128.736L52.4718 128.738ZM21.6769 57.2941L47.5176 109.919C50.3715 115.62 52.0854 121.74 52.6095 128.108L52.6402 128.485L61.8371 125.801L26.1664 54.5518L21.675 57.2921L21.6769 57.2941Z" fill="#501464"/>
+<path d="M54.3108 34.2759L45.9172 39.372L42.4951 40.8079L50.8829 35.6944L54.3108 34.2759Z" fill="#501464"/>
+<path d="M42.5309 40.8968L42.4448 40.7248L50.8345 35.6113L54.2738 34.1851L54.3599 34.3571L45.9683 39.4551L42.5328 40.8968H42.5309ZM53.1873 34.8441L50.9187 35.7833L43.6365 40.2242L45.8803 39.2831L53.1873 34.8441Z" fill="#501464"/>
+<path d="M42.4987 73.9315C40.8671 74.7645 40.5993 75.5916 41.4237 77.24C40.5993 75.5916 39.7806 75.321 38.1489 76.154C39.7806 75.321 40.0484 74.4939 39.2239 72.8455C40.0484 74.4939 40.8671 74.7645 42.4987 73.9315Z" fill="#501464"/>
+<path d="M45.7438 80.4169C44.1122 81.2498 43.8444 82.0769 44.6688 83.7254C43.8444 82.0769 43.0257 81.8064 41.394 82.6393C43.0257 81.8064 43.2935 80.9793 42.469 79.3308C43.2935 80.9793 44.1122 81.2498 45.7438 80.4169Z" fill="#501464"/>
+<path d="M48.9921 86.9027C47.3605 87.7357 47.0927 88.5628 47.9171 90.2112C47.0927 88.5628 46.274 88.2922 44.6423 89.1252C46.274 88.2922 46.5418 87.4651 45.7173 85.8167C46.5418 87.4651 47.3605 87.7357 48.9921 86.9027Z" fill="#501464"/>
+<g style="mix-blend-mode:multiply">
+<path d="M26.209 54.4186L27.0028 56.0013L32.7681 53.3441L32.0355 51.9102L26.209 54.4186Z" fill="#DCC8F0"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M21.5525 57.2593L26.2083 54.4185L27.0022 56.0012L22.3616 58.6623L21.5525 57.2593Z" fill="#DCC8F0"/>
+</g>
+<path d="M21.8065 57.731L21.5195 57.2286L26.25 54.4708L32.0957 51.8232L32.3309 52.3528L26.4987 54.9945L21.8065 57.731Z" fill="#501464"/>
+<g style="mix-blend-mode:multiply">
+<path d="M22.6087 31.8718L18.5859 33.2864L18.7753 38.4772L23.0352 42.1742L27.0044 40.6514L26.7672 35.5398L22.6087 31.8718Z" fill="#DCC8F0"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M21.5525 57.2596L47.4332 109.966C50.27 115.63 51.9954 121.795 52.5176 128.12L52.5577 128.615L61.9785 125.865L57.426 116.77L26.2102 54.4207L21.5544 57.2615L21.5525 57.2596Z" fill="#DCC8F0"/>
+</g>
+<path d="M105.488 17.6463C105.471 17.6463 105.453 17.6463 105.434 17.6424C105.226 17.6134 105.078 17.4182 105.107 17.2076L105.419 14.9253L107.867 13.2633C108.043 13.1435 108.281 13.1918 108.399 13.3676C108.518 13.5454 108.47 13.7851 108.296 13.9049L106.132 15.3736L105.868 17.3139C105.842 17.5071 105.677 17.6482 105.49 17.6482L105.488 17.6463Z" fill="#F8F4FC"/>
+<g style="mix-blend-mode:multiply">
+<path d="M71.7831 15.7175C71.7946 15.8354 71.8061 15.9533 71.8061 16.075C71.8061 18.6608 69.0611 20.7557 65.6754 20.7557C64.4206 20.7557 63.2557 20.4677 62.2839 19.973C63.0969 21.3683 64.719 22.4563 66.7064 22.7462C69.7937 23.1965 72.5827 21.5577 72.9365 19.0859C73.1106 17.8646 72.6573 16.6703 71.7812 15.7175H71.7831Z" fill="#DCC8F0"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M89.8125 55.1589L83.9019 51.2339L67.6943 75.6264L72.7442 78.1677C73.5074 78.5522 74.4352 78.3049 74.9096 77.5879L89.8144 55.1569L89.8125 55.1589Z" fill="#DCC8F0"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<path d="M89.8125 55.1588L83.8999 51.2377L89.0856 43.4321L90.2046 44.4467C88.1636 47.5736 88.4391 51.2396 89.8125 55.1588Z" fill="#DCC8F0"/>
+</g>
+<path d="M92.2955 43.919L87.5096 40.6743L86.3524 42.4155C85.9679 42.9953 86.0482 43.7702 86.5456 44.2534L87.8482 45.2931L89.1566 46.0236L89.3613 46.1221C90.0002 46.4313 90.7672 46.2207 91.1612 45.6255L92.2955 43.9171V43.919Z" fill="#FFE66D"/>
+<path d="M89.9712 46.3579C89.7513 46.3579 89.5275 46.3096 89.319 46.2091L89.1143 46.1106L87.8001 45.3762L86.4841 44.3288C85.9466 43.805 85.8586 42.9798 86.2699 42.3595L87.4807 40.5371L92.4254 43.8901L91.2375 45.6777C90.9487 46.1125 90.4648 46.356 89.9693 46.356L89.9712 46.3579ZM87.5362 40.8057L86.4325 42.4677C86.0729 43.0088 86.1494 43.7297 86.6123 44.1838L87.9073 45.2158L89.2023 45.9386L89.4012 46.0352C89.9923 46.3212 90.7153 46.1221 91.0807 45.5733L92.1634 43.9461L87.5362 40.8077V40.8057Z" fill="#501464"/>
+<path d="M42.4987 73.9315C40.8671 74.7645 40.5993 75.5916 41.4237 77.24C40.5993 75.5916 39.7806 75.321 38.1489 76.154C39.7806 75.321 40.0484 74.4939 39.2239 72.8455C40.0484 74.4939 40.8671 74.7645 42.4987 73.9315Z" fill="#501464"/>
+<path d="M45.7438 80.4169C44.1122 81.2498 43.8444 82.0769 44.6688 83.7254C43.8444 82.0769 43.0257 81.8064 41.394 82.6393C43.0257 81.8064 43.2935 80.9793 42.469 79.3308C43.2935 80.9793 44.1122 81.2498 45.7438 80.4169Z" fill="#501464"/>
+<path d="M48.9921 86.9027C47.3605 87.7357 47.0927 88.5628 47.9171 90.2112C47.0927 88.5628 46.274 88.2922 44.6423 89.1252C46.274 88.2922 46.5418 87.4651 45.7173 85.8167C46.5418 87.4651 47.3605 87.7357 48.9921 86.9027Z" fill="#501464"/>
+</svg>
diff --git a/public/manifest.json b/public/manifest.json
index b668616225..fb17c91cea 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,25 +1,41 @@
 {
-  "short_name": "Fractal",
-  "name": "Fractal",
+  "name": "Decent",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
     },
     {
-      "src": "images/logo192.png",
+      "src": "/android-icon-144x144.png",
+      "sizes": "144x144",
       "type": "image/png",
-      "sizes": "192x192"
+      "density": "3.0"
     },
     {
-      "src": "images/logo512.png",
+      "src": "/android-icon-192x192.png",
+      "sizes": "192x192",
       "type": "image/png",
-      "sizes": "512x512"
+      "density": "4.0"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#181716",
-  "background_color": "#333333"
+  ]
 }
diff --git a/public/ms-icon-144x144.png b/public/ms-icon-144x144.png
new file mode 100644
index 0000000000..deeff5f49f
Binary files /dev/null and b/public/ms-icon-144x144.png differ
diff --git a/public/ms-icon-150x150.png b/public/ms-icon-150x150.png
new file mode 100644
index 0000000000..b28bb31a2b
Binary files /dev/null and b/public/ms-icon-150x150.png differ
diff --git a/public/ms-icon-310x310.png b/public/ms-icon-310x310.png
new file mode 100644
index 0000000000..e86c7efdef
Binary files /dev/null and b/public/ms-icon-310x310.png differ
diff --git a/public/ms-icon-70x70.png b/public/ms-icon-70x70.png
new file mode 100644
index 0000000000..ab651d63b9
Binary files /dev/null and b/public/ms-icon-70x70.png differ
diff --git a/src/components/Activity/ActivityAddress.tsx b/src/components/Activity/ActivityAddress.tsx
index aaefa2e5e5..9698673092 100644
--- a/src/components/Activity/ActivityAddress.tsx
+++ b/src/components/Activity/ActivityAddress.tsx
@@ -1,6 +1,7 @@
+import { Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import useDisplayName from '../../hooks/utils/useDisplayName';
-import EtherscanLinkAddress from '../ui/links/EtherscanLinkAddress';
+import EtherscanLink from '../ui/links/EtherscanLink';
 
 export function ActivityAddress({
   address,
@@ -14,10 +15,15 @@ export function ActivityAddress({
   const { displayName } = useDisplayName(address);
   const { t } = useTranslation();
   return (
-    <EtherscanLinkAddress address={address}>
-      {displayName}
-      {isMe && t('isMeSuffix')}
-      {addComma && ', '}
-    </EtherscanLinkAddress>
+    <EtherscanLink
+      type="address"
+      value={address}
+    >
+      <Text w="full">
+        {displayName}
+        {isMe && t('isMeSuffix')}
+        {addComma && ', '}
+      </Text>
+    </EtherscanLink>
   );
 }
diff --git a/src/components/Activity/ActivityCard.tsx b/src/components/Activity/ActivityCard.tsx
index e5e7b13f21..279d3a4f97 100644
--- a/src/components/Activity/ActivityCard.tsx
+++ b/src/components/Activity/ActivityCard.tsx
@@ -33,12 +33,13 @@ export function ActivityCard({
       >
         <Flex flexDirection="column">
           <Flex
-            color="sand.700"
+            color="neutral-7"
             alignItems="center"
             gap="1rem"
             mb="1rem"
           >
             {Badge}
+            {/* TODO: replace with <SnapshotIcon /> */}
             {isSnapshot && (
               <Image
                 src="/images/snapshot-icon-fill.svg"
@@ -53,10 +54,7 @@ export function ActivityCard({
               alignItems="center"
               gap="0.5rem"
             >
-              <Text
-                textStyle="text-base-sans-regular"
-                color="chocolate.300"
-              >
+              <Text color="neutral-7">
                 {eventDateLabel} {eventDate}
               </Text>
             </Flex>
diff --git a/src/components/Activity/ActivityDescription.tsx b/src/components/Activity/ActivityDescription.tsx
index 6e4703c4e0..94a3382ca5 100644
--- a/src/components/Activity/ActivityDescription.tsx
+++ b/src/components/Activity/ActivityDescription.tsx
@@ -8,9 +8,14 @@ import { ActivityDescriptionTreasury } from './ActivityDescriptionTreasury';
 interface IActivityDescription {
   activity: Activity;
   showFullDescription?: boolean;
+  showAuthor?: boolean;
 }
 
-export function ActivityDescription({ activity, showFullDescription }: IActivityDescription) {
+export function ActivityDescription({
+  activity,
+  showFullDescription,
+  showAuthor = true,
+}: IActivityDescription) {
   const metaData = useGetMetadata(activity as FractalProposal);
 
   const snapshotProposal = activity as SnapshotProposal;
@@ -24,12 +29,13 @@ export function ActivityDescription({ activity, showFullDescription }: IActivity
     >
       <ProposalTitle
         activity={activity}
-        showAuthor
+        showAuthor={showAuthor}
       />
       {description && (
         <Box
           mt={2}
-          textColor="#B3B3B3"
+          textColor={showFullDescription ? 'white-0' : 'neutral-7'}
+          textStyle="body-base"
         >
           <Markdown
             content={description}
diff --git a/src/components/Activity/ActivityDescriptionGovernance.tsx b/src/components/Activity/ActivityDescriptionGovernance.tsx
index 2af1420272..0fe00e303b 100644
--- a/src/components/Activity/ActivityDescriptionGovernance.tsx
+++ b/src/components/Activity/ActivityDescriptionGovernance.tsx
@@ -59,8 +59,8 @@ function ProposalAuthor({ activity }: { activity: Activity }) {
     <Flex
       gap={2}
       alignItems="center"
-      color="#B3B3B3"
-      textStyle="text-md-sans-regular"
+      color="neutral-7"
+      textStyle="label-base"
     >
       <Avatar
         size="sm"
@@ -97,17 +97,22 @@ export function ProposalTitle({
   const titleText = proposalIdText + ' ' + proposaltitleText;
   return (
     <Box
-      textStyle="text-lg-sans-medium"
-      fontSize="20px"
-      color="grayscale.100"
-      pr={2}
+      textStyle="display-lg"
+      color="white-0"
+      pr="1.5rem"
     >
       <Flex
         alignItems="center"
         gap={2}
         flexWrap="wrap"
       >
-        <Text as="span">{titleText}</Text>
+        <Text
+          as="span"
+          textStyle="display-xl"
+          maxW="100%"
+        >
+          {titleText}
+        </Text>
         {showAuthor && <ProposalAuthor activity={activity} />}
       </Flex>
       <Box mt={2}>
diff --git a/src/components/Activity/ActivityDescriptionModule.tsx b/src/components/Activity/ActivityDescriptionModule.tsx
deleted file mode 100644
index fe1c8de28b..0000000000
--- a/src/components/Activity/ActivityDescriptionModule.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
-import { format } from 'date-fns';
-import { useTranslation } from 'react-i18next';
-import { useFractal } from '../../providers/App/AppProvider';
-import { ActivityEventType, FractalProposal } from '../../types';
-import { DEFAULT_DATE_FORMAT } from '../../utils';
-import { ActivityAddress } from './ActivityAddress';
-
-export function ActivityDescriptionModule({ activity }: { activity: FractalProposal }) {
-  const { t } = useTranslation(['treasury', 'dashboard', 'common']);
-
-  const {
-    node: { daoAddress },
-  } = useFractal();
-  const eventDateLabel = t(
-    activity.eventType === ActivityEventType.Treasury
-      ? activity.transaction?.to === daoAddress
-        ? 'received'
-        : 'sent'
-      : 'created',
-  );
-  return (
-    <Box
-      color="grayscale.100"
-      textStyle="text-lg-mono-semibold"
-    >
-      <Flex
-        flexWrap="wrap"
-        gap={2}
-      >
-        <Box>{t('moduleDescription', { ns: 'dashboard', count: activity.targets.length })}</Box>
-        <Box>
-          {activity.targets.length > 2
-            ? t('addresses', {
-                ns: 'treasury',
-                numOfAddresses: activity.targets.length,
-              })
-            : activity.targets.map((address, i, arr) => (
-                <ActivityAddress
-                  key={address + i}
-                  address={address}
-                  addComma={i !== arr.length - 1}
-                />
-              ))}
-        </Box>
-      </Flex>
-      <Box>
-        {activity.eventDate && (
-          <Text
-            mt={2}
-            textStyle="text-base-sans-regular"
-            color="#838383"
-          >
-            {eventDateLabel} {format(activity.eventDate, DEFAULT_DATE_FORMAT)}
-          </Text>
-        )}
-      </Box>
-    </Box>
-  );
-}
diff --git a/src/components/Activity/ActivityDescriptionTreasury.tsx b/src/components/Activity/ActivityDescriptionTreasury.tsx
index 50a21b9185..278e4ccd34 100644
--- a/src/components/Activity/ActivityDescriptionTreasury.tsx
+++ b/src/components/Activity/ActivityDescriptionTreasury.tsx
@@ -35,7 +35,10 @@ export function ActivityDescriptionTreasury({ activity }: { activity: Activity }
     : undefined;
 
   return (
-    <Flex>
+    <Flex
+      alignItems="center"
+      flexWrap="wrap"
+    >
       <Text mr={2}>{textString}</Text>
       {treasuryActivity.transferAddresses.length > 2
         ? t('addresses', {
diff --git a/src/components/Activity/ActivityModule.tsx b/src/components/Activity/ActivityModule.tsx
deleted file mode 100644
index c0bb90cb3e..0000000000
--- a/src/components/Activity/ActivityModule.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FractalProposal } from '../../types';
-import { Badge } from '../ui/badges/Badge';
-import EtherscanLinkTransaction from '../ui/links/EtherscanLinkTransaction';
-import { ActivityCard } from './ActivityCard';
-import { ActivityDescriptionModule } from './ActivityDescriptionModule';
-
-export function ActivityModule({ activity }: { activity: FractalProposal }) {
-  return (
-    <EtherscanLinkTransaction txHash={activity.transactionHash}>
-      <ActivityCard
-        Badge={
-          activity.state && (
-            <Badge
-              size="base"
-              labelKey={activity.state}
-            />
-          )
-        }
-        description={<ActivityDescriptionModule activity={activity} />}
-      />
-    </EtherscanLinkTransaction>
-  );
-}
diff --git a/src/components/Activity/ActivityTreasury.tsx b/src/components/Activity/ActivityTreasury.tsx
index 390ad80293..b6b52b99f1 100644
--- a/src/components/Activity/ActivityTreasury.tsx
+++ b/src/components/Activity/ActivityTreasury.tsx
@@ -1,11 +1,11 @@
-import { Button } from '@chakra-ui/react';
-import { SquareSolidArrowDown, ArrowAngleUp, SquareSolidArrowUp } from '@decent-org/fractal-ui';
+import { Button, Icon } from '@chakra-ui/react';
+import { ArrowUp, ArrowDown, ArrowUpRight } from '@phosphor-icons/react';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../providers/App/AppProvider';
 import { TreasuryActivity, ActivityEventType } from '../../types';
 import { DEFAULT_DATE_FORMAT } from '../../utils/numberFormats';
-import EtherscanLinkTransaction from '../ui/links/EtherscanLinkTransaction';
+import EtherscanLink from '../ui/links/EtherscanLink';
 import { ActivityCard } from './ActivityCard';
 import { ActivityDescription } from './ActivityDescription';
 
@@ -25,31 +25,29 @@ export function ActivityTreasury({ activity }: { activity: TreasuryActivity }) {
   return (
     <ActivityCard
       Badge={
-        activity.isDeposit ? (
-          <SquareSolidArrowDown color="sand.700" />
-        ) : (
-          <SquareSolidArrowUp color="sand.700" />
-        )
+        <Icon
+          as={activity.isDeposit ? ArrowUp : ArrowDown}
+          w="1.25rem"
+          h="1.25rem"
+          color="neutral-7"
+        />
       }
       description={<ActivityDescription activity={activity} />}
       RightElement={
         activity.transactionHash ? (
-          <EtherscanLinkTransaction txHash={activity.transactionHash}>
+          <EtherscanLink
+            type="tx"
+            value={activity.transactionHash}
+          >
             <Button
               variant="text"
-              size="lg"
-              px="0px"
-              _hover={{ color: 'gold.500-hover' }}
-              rightIcon={
-                <ArrowAngleUp
-                  boxSize="1.5rem"
-                  fill="currentColor"
-                />
-              }
+              size="sm"
+              _hover={{ color: 'celery-0' }}
+              rightIcon={<ArrowUpRight />}
             >
               {t('labelEtherscan')}
             </Button>
-          </EtherscanLinkTransaction>
+          </EtherscanLink>
         ) : undefined
       }
       eventDate={format(activity.eventDate, DEFAULT_DATE_FORMAT)}
diff --git a/src/components/DaoCreator/StepButtons.tsx b/src/components/DaoCreator/StepButtons.tsx
index 086f743260..26cafdbaac 100644
--- a/src/components/DaoCreator/StepButtons.tsx
+++ b/src/components/DaoCreator/StepButtons.tsx
@@ -1,4 +1,5 @@
-import { Flex, Button } from '@chakra-ui/react';
+import { Flex, Button, Icon } from '@chakra-ui/react';
+import { CaretRight, CaretLeft } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { useFractal } from '../../providers/App/AppProvider';
@@ -40,20 +41,23 @@ export function StepButtons({
     <Flex
       alignItems="center"
       width="100%"
+      mt="1.5rem"
     >
       {prevStep && (
         <Button
           data-testid="create-prevButton"
           variant="text"
           isDisabled={transactionPending || isSubmitting}
-          disabled={true}
           onClick={() => updateStep(prevStep)}
+          color="lilac-0"
+          width="50%"
         >
+          <Icon as={CaretLeft} />
           {t('back', { ns: 'common' })}
         </Button>
       )}
       <Button
-        w="full"
+        w={prevStep ? '50%' : 'full'}
         type={buttonType}
         isDisabled={transactionPending || isSubmitting || !!errors[step] || isNextDisabled}
         onClick={() => {
@@ -68,6 +72,7 @@ export function StepButtons({
         data-testid={!isLastStep ? 'create-skipNextButton' : 'create-deployDAO'}
       >
         {forwardButtonText}
+        {!isLastStep && <Icon as={CaretRight} />}
       </Button>
     </Flex>
   );
diff --git a/src/components/DaoCreator/StepController.tsx b/src/components/DaoCreator/StepController.tsx
index 63491f505c..fc2fd8f7b6 100644
--- a/src/components/DaoCreator/StepController.tsx
+++ b/src/components/DaoCreator/StepController.tsx
@@ -11,7 +11,9 @@ function StepController(props: Omit<ICreationStepProps, 'step' | 'updateStep'>)
   const [step, setStepState] = useState<CreatorSteps>(CreatorSteps.ESSENTIALS);
   const updateStep = (newStep: CreatorSteps) => {
     setStepState(newStep);
+    window.scrollTo(0, 0);
   };
+
   switch (step) {
     case CreatorSteps.ESSENTIALS:
       return (
diff --git a/src/components/DaoCreator/StepWrapper.tsx b/src/components/DaoCreator/StepWrapper.tsx
index ba9f45aa06..ecce6a06b0 100644
--- a/src/components/DaoCreator/StepWrapper.tsx
+++ b/src/components/DaoCreator/StepWrapper.tsx
@@ -1,9 +1,8 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Trash } from '@decent-org/fractal-ui';
+import { Trash } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
 import { BASE_ROUTES, DAO_ROUTES } from '../../constants/routes';
 import { useFractal } from '../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
@@ -44,8 +43,8 @@ export function StepWrapper({
             w="full"
           >
             <Text
-              textStyle="text-2xl-mono-regular"
-              color="grayscale.100"
+              textStyle="display-2xl"
+              color="white-0"
             >
               {t(titleKey)}
             </Text>
@@ -75,11 +74,10 @@ export function StepWrapper({
       )}
       {shouldWrapChildren ? (
         <Box
-          bg={BACKGROUND_SEMI_TRANSPARENT}
-          rounded="lg"
-          mt={8}
-          px={4}
-          py={8}
+          mt="1.5rem"
+          padding="1.5rem"
+          bg="neutral-2"
+          borderRadius="0.25rem"
         >
           {children}
         </Box>
diff --git a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx
index bea29eaca5..fd7d524973 100644
--- a/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx
+++ b/src/components/DaoCreator/formComponents/AzoriusGovernance.tsx
@@ -1,13 +1,5 @@
-import {
-  Alert,
-  AlertTitle,
-  Divider,
-  Flex,
-  InputGroup,
-  InputRightElement,
-  Text,
-} from '@chakra-ui/react';
-import { Info } from '@decent-org/fractal-ui';
+import { Alert, Flex, InputGroup, InputRightElement, Text } from '@chakra-ui/react';
+import { WarningCircle } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { ICreationStepProps, CreatorSteps, VotingStrategyType } from '../../../types';
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
@@ -22,144 +14,141 @@ export function AzoriusGovernance(props: ICreationStepProps) {
   const { t } = useTranslation(['daoCreate', 'common']);
   const minutes = t('minutes', { ns: 'common' });
   return (
-    <StepWrapper
-      mode={mode}
-      titleKey="titleGovConfig"
-      isSubDAO={isSubDAO}
-      isFormSubmitting={!!isSubmitting || transactionPending}
-    >
-      <Flex
-        flexDirection="column"
-        gap={8}
+    <>
+      <StepWrapper
+        mode={mode}
+        titleKey="titleGovConfig"
+        isSubDAO={isSubDAO}
+        isFormSubmitting={!!isSubmitting || transactionPending}
       >
-        <ContentBoxTitle>{t('titleProposalSettings', { ns: 'daoCreate' })}</ContentBoxTitle>
-        <LabelComponent
-          label={t('labelVotingPeriod')}
-          helper={t('helperVotingPeriod')}
-          isRequired
+        <Flex
+          flexDirection="column"
+          gap={8}
         >
-          <InputGroup>
-            <BigIntInput
-              value={values.azorius.votingPeriod.bigintValue}
-              onChange={valuePair => setFieldValue('azorius.votingPeriod', valuePair)}
-              decimalPlaces={0}
-              min="1"
-              data-testid="govConfig-votingPeriod"
-            />
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
-          >
-            {t('exampleVotingPeriod')}
-          </Text>
-        </LabelComponent>
-        {values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20 ? (
+          <ContentBoxTitle>{t('titleProposalSettings', { ns: 'daoCreate' })}</ContentBoxTitle>
           <LabelComponent
-            label={t('quorum', { ns: 'common' })}
-            helper={t('helperQuorum')}
+            label={t('labelVotingPeriod')}
+            helper={t('helperVotingPeriod')}
             isRequired
           >
             <InputGroup>
               <BigIntInput
-                value={values.azorius.quorumPercentage.bigintValue}
-                onChange={valuePair => setFieldValue('azorius.quorumPercentage', valuePair)}
-                max="100"
+                value={values.azorius.votingPeriod.bigintValue}
+                onChange={valuePair => setFieldValue('azorius.votingPeriod', valuePair)}
                 decimalPlaces={0}
-                data-testid="govConfig-quorumPercentage"
+                min="1"
+                data-testid="govConfig-votingPeriod"
               />
-              <InputRightElement>%</InputRightElement>
+              <InputRightElement mr="4">{minutes}</InputRightElement>
             </InputGroup>
+            <Text
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleVotingPeriod')}
+            </Text>
           </LabelComponent>
-        ) : (
+          {values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20 ? (
+            <LabelComponent
+              label={t('quorum', { ns: 'common' })}
+              helper={t('helperQuorum')}
+              isRequired
+            >
+              <InputGroup>
+                <BigIntInput
+                  value={values.azorius.quorumPercentage.bigintValue}
+                  onChange={valuePair => setFieldValue('azorius.quorumPercentage', valuePair)}
+                  max="100"
+                  decimalPlaces={0}
+                  data-testid="govConfig-quorumPercentage"
+                />
+                <InputRightElement>%</InputRightElement>
+              </InputGroup>
+            </LabelComponent>
+          ) : (
+            <LabelComponent
+              label={t('quorum', { ns: 'common' })}
+              helper={t('helperQuorumThreshold')}
+              isRequired
+            >
+              <BigIntInput
+                value={values.erc721Token.quorumThreshold.bigintValue}
+                onChange={valuePair => setFieldValue('erc721Token.quorumThreshold', valuePair)}
+                decimalPlaces={0}
+                min="1"
+                data-testid="govConfig-quorumThreshold"
+              />
+            </LabelComponent>
+          )}
           <LabelComponent
-            label={t('quorum', { ns: 'common' })}
-            helper={t('helperQuorumThreshold')}
+            label={t('labelTimelockPeriod')}
+            helper={t('helperTimelockPeriod')}
             isRequired
           >
-            <BigIntInput
-              value={values.erc721Token.quorumThreshold.bigintValue}
-              onChange={valuePair => setFieldValue('erc721Token.quorumThreshold', valuePair)}
-              decimalPlaces={0}
-              min="1"
-              data-testid="govConfig-quorumThreshold"
-            />
+            <InputGroup>
+              <BigIntInput
+                value={values.azorius.timelock.bigintValue}
+                onChange={valuePair => setFieldValue('azorius.timelock', valuePair)}
+                decimalPlaces={0}
+                data-testid="govConfig-timelock"
+              />
+              <InputRightElement mr="4">{minutes}</InputRightElement>
+            </InputGroup>
+            <Text
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleTimelockPeriod')}
+            </Text>
           </LabelComponent>
-        )}
-        <LabelComponent
-          label={t('labelTimelockPeriod')}
-          helper={t('helperTimelockPeriod')}
-          isRequired
-        >
-          <InputGroup>
-            <BigIntInput
-              value={values.azorius.timelock.bigintValue}
-              onChange={valuePair => setFieldValue('azorius.timelock', valuePair)}
-              decimalPlaces={0}
-              data-testid="govConfig-timelock"
-            />
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
-          >
-            {t('exampleTimelockPeriod')}
-          </Text>
-        </LabelComponent>
-        <LabelComponent
-          label={t('labelExecutionPeriod')}
-          helper={t('helperExecutionPeriod')}
-          isRequired
-        >
-          <InputGroup>
-            <BigIntInput
-              value={values.azorius.executionPeriod.bigintValue}
-              onChange={valuePair => setFieldValue('azorius.executionPeriod', valuePair)}
-              decimalPlaces={0}
-              min="1"
-              data-testid="govModule-executionDetails"
-            />
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
+          <LabelComponent
+            label={t('labelExecutionPeriod')}
+            helper={t('helperExecutionPeriod')}
+            isRequired
           >
-            {t('exampleExecutionPeriod')}
-          </Text>
-        </LabelComponent>
-        <Alert status="info">
-          <Info boxSize="24px" />
-          <AlertTitle>
+            <InputGroup>
+              <BigIntInput
+                value={values.azorius.executionPeriod.bigintValue}
+                onChange={valuePair => setFieldValue('azorius.executionPeriod', valuePair)}
+                decimalPlaces={0}
+                min="1"
+                data-testid="govModule-executionDetails"
+              />
+              <InputRightElement mr="4">{minutes}</InputRightElement>
+            </InputGroup>
+            <Text
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleExecutionPeriod')}
+            </Text>
+          </LabelComponent>
+          <Alert status="info">
+            <WarningCircle size="24" />
             <Text
-              textStyle="text-lg-mono-medium"
+              textStyle="body-base-strong"
               whiteSpace="pre-wrap"
+              ml="1rem"
             >
               {t('governanceDescription')}
             </Text>
-          </AlertTitle>
-        </Alert>
-        <Divider
-          color="chocolate.700"
-          mb={4}
-        />
-        <StepButtons
-          {...props}
-          prevStep={
-            values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20
-              ? CreatorSteps.ERC20_DETAILS
-              : CreatorSteps.ERC721_DETAILS
-          }
-          nextStep={CreatorSteps.FREEZE_DETAILS}
-          isLastStep={!isSubDAO}
-          isEdit={mode === DAOCreateMode.EDIT}
-        />
-      </Flex>
-    </StepWrapper>
+          </Alert>
+        </Flex>
+      </StepWrapper>
+      <StepButtons
+        {...props}
+        prevStep={
+          values.azorius.votingStrategyType === VotingStrategyType.LINEAR_ERC20
+            ? CreatorSteps.ERC20_DETAILS
+            : CreatorSteps.ERC721_DETAILS
+        }
+        nextStep={CreatorSteps.FREEZE_DETAILS}
+        isLastStep={!isSubDAO}
+        isEdit={mode === DAOCreateMode.EDIT}
+      />
+    </>
   );
 }
diff --git a/src/components/DaoCreator/formComponents/AzoriusNFTDetail.tsx b/src/components/DaoCreator/formComponents/AzoriusNFTDetail.tsx
index 4973271906..2022e22831 100644
--- a/src/components/DaoCreator/formComponents/AzoriusNFTDetail.tsx
+++ b/src/components/DaoCreator/formComponents/AzoriusNFTDetail.tsx
@@ -72,16 +72,16 @@ export default function AzoriusNFTDetail({
       position="relative"
     >
       <Flex justifyContent="space-between">
-        <Text color="chocolate.200">{t('nftDetailsToken')}</Text>
+        <Text color="neutral-7">{t('nftDetailsToken')}</Text>
         <Box textAlign="right">
           {showData ? (
             <>
               <Text>{tokenDetails.symbol}</Text>
               <Text>{tokenDetails.name}</Text>
-              <Text color="chocolate.200">{displayName}</Text>
+              <Text color="neutral-7">{displayName}</Text>
             </>
           ) : (
-            <Text color="chocolate.200">{t('n/a')}</Text>
+            <Text color="neutral-7">{t('n/a')}</Text>
           )}
         </Box>
       </Flex>
@@ -89,8 +89,8 @@ export default function AzoriusNFTDetail({
         mt={4}
         justifyContent="space-between"
       >
-        <Text color="chocolate.200">{t('nftDetailsWeight')}</Text>
-        <Text color={showData && nft.tokenWeight.value ? undefined : 'chocolate.200'}>
+        <Text color="neutral-7">{t('nftDetailsWeight')}</Text>
+        <Text color={showData && nft.tokenWeight.value ? undefined : 'neutral-7'}>
           {showData && nft.tokenWeight.value ? nft.tokenWeight.value : t('n/a')}
         </Text>
       </Flex>
diff --git a/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx b/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx
index c6e2f383b2..206dd3034d 100644
--- a/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx
+++ b/src/components/DaoCreator/formComponents/AzoriusNFTDetails.tsx
@@ -1,9 +1,10 @@
-import { Box, Flex, Grid, GridItem, Input, Divider, Button } from '@chakra-ui/react';
-import { AddPlus, Minus } from '@decent-org/fractal-ui';
+import { Box, Flex, Grid, GridItem, Input, IconButton } from '@chakra-ui/react';
+import { MinusCircle, Plus } from '@phosphor-icons/react';
 import { Field, FieldAttributes, FormikErrors } from 'formik';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
+import { zeroAddress } from 'viem';
+import { createAccountSubstring } from '../../../hooks/utils/useDisplayName';
 import {
   ICreationStepProps,
   CreatorSteps,
@@ -13,14 +14,12 @@ import {
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
+import CeleryButtonWithIcon from '../../ui/utils/CeleryButtonWithIcon';
+import Divider from '../../ui/utils/Divider';
 import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 import AzoriusNFTDetail from './AzoriusNFTDetail';
 
-const templateAreaTwoCol = '"content details"';
-const templateAreaSingleCol = `"content"
-  "details"`;
-
 export default function AzoriusNFTDetails(props: ICreationStepProps) {
   const { transactionPending, isSubDAO, setFieldValue, values, isSubmitting, mode, errors } = props;
   const { t } = useTranslation('daoCreate');
@@ -40,190 +39,186 @@ export default function AzoriusNFTDetails(props: ICreationStepProps) {
   };
 
   return (
-    <StepWrapper
-      mode={mode}
-      isSubDAO={isSubDAO}
-      isFormSubmitting={!!isSubmitting || transactionPending}
-      titleKey="titleNFTConfig"
-      shouldWrapChildren={false}
-    >
-      <Grid
-        gap={4}
-        templateColumns={{ base: '1fr', lg: '2fr 1fr' }}
-        gridTemplateRows={{ base: '1fr', lg: '5.1em 1fr' }}
-        templateAreas={{
-          base: templateAreaSingleCol,
-          lg: templateAreaTwoCol,
-        }}
+    <>
+      <StepWrapper
+        mode={mode}
+        isSubDAO={isSubDAO}
+        isFormSubmitting={!!isSubmitting || transactionPending}
+        titleKey="titleNFTConfig"
+        shouldWrapChildren={false}
       >
-        <GridItem area="content">
-          <Flex
-            flexDirection="column"
-            gap={5}
-            alignItems="flex-start"
-            bg={BACKGROUND_SEMI_TRANSPARENT}
-            rounded="lg"
-            px={4}
-            py={8}
-          >
-            <ContentBoxTitle>{t('titleNFTsParams')}</ContentBoxTitle>
-            {values.erc721Token.nfts.map((nft, i) => {
-              const nftError = (
-                errors?.erc721Token?.nfts as FormikErrors<
-                  ERC721TokenConfig<BigIntValuePair>[] | undefined
-                >
-              )?.[i];
-              const addressErrorMessage =
-                nftError?.tokenAddress && nft.tokenAddress?.length
-                  ? nftError.tokenAddress
-                  : undefined;
-              const weightErrorMessage =
-                nftError?.tokenWeight && nftError.tokenWeight.value && nft.tokenWeight.value.length
-                  ? nftError.tokenWeight.value
-                  : undefined;
+        <Grid
+          gap={4}
+          templateColumns={{ base: '1fr', lg: '2fr 1fr' }}
+          templateAreas={{
+            base: '"content" "details"',
+            lg: '"content details"',
+          }}
+        >
+          <GridItem area="content">
+            <Flex
+              flexDirection="column"
+              gap={5}
+              alignItems="flex-start"
+              mt="1.5rem"
+              padding="1.5rem"
+              bg="neutral-2"
+              borderRadius="0.25rem"
+            >
+              <ContentBoxTitle>{t('titleNFTsParams')}</ContentBoxTitle>
+              {values.erc721Token.nfts.map((nft, i) => {
+                const nftError = (
+                  errors?.erc721Token?.nfts as FormikErrors<
+                    ERC721TokenConfig<BigIntValuePair>[] | undefined
+                  >
+                )?.[i];
+                const addressErrorMessage =
+                  nftError?.tokenAddress && nft.tokenAddress?.length
+                    ? nftError.tokenAddress
+                    : undefined;
+                const weightErrorMessage =
+                  nftError?.tokenWeight &&
+                  nftError.tokenWeight.value &&
+                  nft.tokenWeight.value.length
+                    ? nftError.tokenWeight.value
+                    : undefined;
 
-              const isFirstElement = i === 0;
-              return (
-                <Flex
-                  key={i}
-                  gap={4}
-                  alignItems="flex-start"
-                  width="100%"
-                >
-                  <LabelComponent
-                    label={isFirstElement ? t('labelNFTAddress') : undefined}
-                    helper={isFirstElement ? t('helperNFTAddress') : undefined}
-                    isRequired={isFirstElement}
-                    helperSlot="end"
-                    errorMessage={addressErrorMessage}
-                    gridContainerProps={{
-                      display: 'flex',
-                      flexWrap: 'wrap',
-                      width: '65%',
-                    }}
-                    inputContainerProps={{
-                      width: '100%',
-                    }}
+                const isFirstElement = i === 0;
+                const isLastElement = i === values.erc721Token.nfts.length - 1;
+                return (
+                  <Flex
+                    key={i}
+                    gap={4}
+                    alignItems="flex-start"
+                    width="100%"
                   >
-                    <Field name={`erc721Token.nfts.${i}.tokenAddress`}>
-                      {({ field }: FieldAttributes<any>) => (
-                        <Input
-                          {...field}
-                          value={nft.tokenAddress}
-                          onChange={e =>
-                            setFieldValue(`erc721Token.nfts.${i}.tokenAddress`, e.target.value)
+                    <LabelComponent
+                      label={isFirstElement ? t('labelNFTAddress') : undefined}
+                      helper={isLastElement ? t('helperNFTAddress') : undefined}
+                      isRequired={isFirstElement}
+                      helperSlot="end"
+                      errorMessage={addressErrorMessage}
+                      gridContainerProps={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        width: '65%',
+                      }}
+                      inputContainerProps={{
+                        width: '100%',
+                      }}
+                    >
+                      <Field name={`erc721Token.nfts.${i}.tokenAddress`}>
+                        {({ field }: FieldAttributes<any>) => (
+                          <Input
+                            {...field}
+                            value={nft.tokenAddress}
+                            onChange={e =>
+                              setFieldValue(`erc721Token.nfts.${i}.tokenAddress`, e.target.value)
+                            }
+                            data-testid={`erc721Token.nfts.${i}.tokenAddressInput`}
+                            minWidth="100%"
+                            placeholder={createAccountSubstring(zeroAddress)}
+                          />
+                        )}
+                      </Field>
+                    </LabelComponent>
+                    <LabelComponent
+                      label={isFirstElement ? t('labelNFTWeight') : undefined}
+                      helper={isLastElement ? t('helperNFTWeight') : undefined}
+                      isRequired={isFirstElement}
+                      errorMessage={weightErrorMessage}
+                      helperSlot="end"
+                      gridContainerProps={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        width: '35%',
+                      }}
+                      inputContainerProps={{
+                        width: '100%',
+                      }}
+                    >
+                      <Flex>
+                        <BigIntInput
+                          value={nft.tokenWeight.bigintValue}
+                          onChange={valuePair =>
+                            setFieldValue(`erc721Token.nfts.${i}.tokenWeight`, valuePair)
                           }
-                          data-testid={`erc721Token.nfts.${i}.tokenAddressInput`}
-                          minWidth="100%"
+                          data-testid={`erc721Token.nfts.${i}.tokenWeightInput`}
+                          decimalPlaces={0}
+                          isRequired
+                          min="1"
+                          placeholder="1"
                         />
-                      )}
-                    </Field>
-                  </LabelComponent>
-                  <LabelComponent
-                    label={isFirstElement ? t('labelNFTWeight') : undefined}
-                    helper={isFirstElement ? t('helperNFTWeight') : undefined}
-                    isRequired={isFirstElement}
-                    errorMessage={weightErrorMessage}
-                    helperSlot="end"
-                    gridContainerProps={{
-                      display: 'flex',
-                      flexWrap: 'wrap',
-                      width: '35%',
-                    }}
-                    inputContainerProps={{
-                      width: '100%',
-                    }}
-                  >
-                    <Flex>
-                      <BigIntInput
-                        value={nft.tokenWeight.bigintValue}
-                        onChange={valuePair =>
-                          setFieldValue(`erc721Token.nfts.${i}.tokenWeight`, valuePair)
-                        }
-                        data-testid={`erc721Token.nfts.${i}.tokenWeightInput`}
-                        decimalPlaces={0}
-                        isRequired
-                        min="1"
-                      />
-                      {values.erc721Token.nfts.length > 1 && (
-                        <Minus
-                          cursor="pointer"
-                          color="gold.500"
-                          boxSize="1.5rem"
-                          ms="1.5rem"
-                          me="0.5rem"
-                          onClick={() => handleRemoveNFT(i)}
-                          alignSelf={'center'}
-                        />
-                      )}
-                    </Flex>
-                  </LabelComponent>
-                </Flex>
-              );
-            })}
-            <Button
-              variant="text"
-              onClick={handleAddNFT}
-              paddingLeft={0}
-            >
-              <AddPlus
-                width="24px"
-                height="24px"
+                        {values.erc721Token.nfts.length > 1 && (
+                          <IconButton
+                            aria-label="remove NFT from the list"
+                            icon={<MinusCircle size="24" />}
+                            variant="unstyled"
+                            minWidth="auto"
+                            color="lilac-0"
+                            _disabled={{ opacity: 0.4, cursor: 'default' }}
+                            sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }}
+                            type="button"
+                            onClick={() => handleRemoveNFT(i)}
+                            mt="-0.25rem"
+                            ml="0.5rem"
+                          />
+                        )}
+                      </Flex>
+                    </LabelComponent>
+                  </Flex>
+                );
+              })}
+              <CeleryButtonWithIcon
+                onClick={handleAddNFT}
+                icon={Plus}
+                text={t('addNFTButton')}
               />
-              {t('addNFTButton')}
-            </Button>
-            <Divider color="chocolate.700" />
-            <StepButtons
-              {...props}
-              prevStep={CreatorSteps.ESSENTIALS}
-              nextStep={CreatorSteps.AZORIUS_DETAILS}
-            />
-          </Flex>
-        </GridItem>
-        <GridItem
-          area="details"
-          width="100%"
-        >
-          <Box
-            bg={BACKGROUND_SEMI_TRANSPARENT}
-            rounded="lg"
-            p={4}
+            </Flex>
+          </GridItem>
+          <GridItem
+            area="details"
+            width="100%"
           >
-            <ContentBoxTitle>{t('titleNFTDetails')}</ContentBoxTitle>
-            <Divider
-              color="chocolate.700"
-              mt="1rem"
-              mb="1rem"
-            />
-            {values.erc721Token.nfts.map((nft, i) => {
-              const nftError = (
-                errors?.erc721Token?.nfts as FormikErrors<
-                  ERC721TokenConfig<BigIntValuePair>[] | undefined
-                >
-              )?.[i];
-              const addressErrorMessage =
-                nftError?.tokenAddress && nft.tokenAddress?.length
-                  ? nftError.tokenAddress
-                  : undefined;
-              return (
-                <Fragment key={i}>
-                  <AzoriusNFTDetail
-                    nft={nft}
-                    hasAddressError={!!addressErrorMessage}
-                  />
-                  {i < values.erc721Token.nfts.length - 1 && (
-                    <Divider
-                      color="chocolate.700"
-                      mt="2rem"
-                      mb="2rem"
+            <Box
+              rounded="lg"
+              border="1px solid"
+              borderColor="neutral-3"
+              p={6}
+              maxWidth="400px"
+              mt="1.5rem"
+            >
+              <ContentBoxTitle>{t('titleNFTDetails')}</ContentBoxTitle>
+              <Divider my="1rem" />
+              {values.erc721Token.nfts.map((nft, i) => {
+                const nftError = (
+                  errors?.erc721Token?.nfts as FormikErrors<
+                    ERC721TokenConfig<BigIntValuePair>[] | undefined
+                  >
+                )?.[i];
+                const addressErrorMessage =
+                  nftError?.tokenAddress && nft.tokenAddress?.length
+                    ? nftError.tokenAddress
+                    : undefined;
+                return (
+                  <Fragment key={i}>
+                    <AzoriusNFTDetail
+                      nft={nft}
+                      hasAddressError={!!addressErrorMessage}
                     />
-                  )}
-                </Fragment>
-              );
-            })}
-          </Box>
-        </GridItem>
-      </Grid>
-    </StepWrapper>
+                    {i < values.erc721Token.nfts.length - 1 && <Divider my="2rem" />}
+                  </Fragment>
+                );
+              })}
+            </Box>
+          </GridItem>
+        </Grid>
+      </StepWrapper>
+      <StepButtons
+        {...props}
+        prevStep={CreatorSteps.ESSENTIALS}
+        nextStep={CreatorSteps.AZORIUS_DETAILS}
+      />
+    </>
   );
 }
diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx
index bd73002b2a..883ae12d13 100644
--- a/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx
+++ b/src/components/DaoCreator/formComponents/AzoriusTokenAllocation.tsx
@@ -1,5 +1,6 @@
 import { IconButton, Box } from '@chakra-ui/react';
-import { LabelWrapper, Minus } from '@decent-org/fractal-ui';
+import { LabelWrapper } from '@decent-org/fractal-ui';
+import { MinusCircle } from '@phosphor-icons/react';
 import { Field, FieldAttributes } from 'formik';
 import { useFormHelpers } from '../../../hooks/utils/useFormHelpers';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
@@ -32,6 +33,7 @@ export function AzoriusTokenAllocation({
           {({ field }: FieldAttributes<any>) => (
             <AddressInput
               {...field}
+              marginTop="-0.25rem" // Freaking LabelWrapper
               data-testid={'tokenVoting-tokenAllocationAddressInput-' + index}
             />
           )}
@@ -39,28 +41,25 @@ export function AzoriusTokenAllocation({
       </LabelWrapper>
       <LabelWrapper errorMessage={amountErrorMessage}>
         <BigIntInput
+          marginTop="-0.25rem" // Freaking LabelWrapper
           value={amountInputValue}
           onChange={valuePair =>
             setFieldValue(`erc20Token.tokenAllocations.${index}.amount`, valuePair)
           }
           data-testid={'tokenVoting-tokenAllocationAmountInput-' + index}
           onKeyDown={restrictChars}
+          placeholder="100,000"
         />
       </LabelWrapper>
       {allocationLength > 1 ? (
         <IconButton
           aria-label="remove allocation"
+          icon={<MinusCircle size="24" />}
           variant="unstyled"
-          minW="0"
-          color="gold.500"
-          _hover={{ color: 'gold.500-hover' }}
-          mt={2}
-          icon={
-            <Minus
-              fill="currentColor"
-              boxSize="1.5rem"
-            />
-          }
+          minWidth="auto"
+          color="lilac-0"
+          _disabled={{ opacity: 0.4, cursor: 'default' }}
+          sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }}
           type="button"
           onClick={() => remove(index)}
           data-testid={'tokenVoting-tokenAllocationRemoveButton-' + index}
diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx
index 6dfde6e9be..30a64d8f0f 100644
--- a/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx
+++ b/src/components/DaoCreator/formComponents/AzoriusTokenAllocations.tsx
@@ -4,14 +4,13 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
-  Button,
   Grid,
   Text,
 } from '@chakra-ui/react';
-import { Gear, LabelWrapper } from '@decent-org/fractal-ui';
+import { LabelWrapper } from '@decent-org/fractal-ui';
+import { Plus, CaretDown, CaretRight } from '@phosphor-icons/react';
 import { FieldArray, FormikErrors } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { useFractal } from '../../../providers/App/AppProvider';
 import {
   AzoriusGovernance,
@@ -22,6 +21,7 @@ import {
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
+import CeleryButtonWithIcon from '../../ui/utils/CeleryButtonWithIcon';
 import { AzoriusTokenAllocation } from './AzoriusTokenAllocation';
 
 export function AzoriusTokenAllocations(props: ICreationStepProps) {
@@ -43,18 +43,8 @@ export function AzoriusTokenAllocations(props: ICreationStepProps) {
               rowGap={2}
               data-testid="tokenVoting-tokenAllocations"
             >
-              <Text
-                textStyle="text-md-sans-regular"
-                color="grayscale.100"
-              >
-                {t('titleAddress')}
-              </Text>
-              <Text
-                textStyle="text-md-sans-regular"
-                color="grayscale.100"
-              >
-                {t('titleAmount')}
-              </Text>
+              <Text>{t('titleAddress')}</Text>
+              <Text>{t('titleAmount')}</Text>
               <Box>{/* EMPTY */}</Box>
 
               {values.erc20Token.tokenAllocations.map((tokenAllocation, index) => {
@@ -91,45 +81,35 @@ export function AzoriusTokenAllocations(props: ICreationStepProps) {
               })}
             </Grid>
             <Text
-              color="grayscale.500"
-              textStyle="text-md-sans-regular"
+              color="neutral-7"
+              textStyle="helper-text-base"
             >
               {t('helperAllocations')}
             </Text>
-            <Button
-              size="base"
-              maxWidth="fit-content"
-              px={0}
-              mx={0}
-              variant="text"
+            <CeleryButtonWithIcon
               onClick={() => push({ address: '', amount: { value: '' } })}
               data-testid="tokenVoting-addAllocation"
-            >
-              {t('labelAddAllocation')}
-            </Button>
+              icon={Plus}
+              text={t('labelAddAllocation')}
+            />
             {canReceiveParentAllocations && (
               <Accordion allowToggle>
                 <AccordionItem
                   borderTop="none"
                   borderBottom="none"
-                  bg={BACKGROUND_SEMI_TRANSPARENT}
-                  my={8}
-                  py={4}
-                  rounded="lg"
+                  my="1.5rem"
                 >
                   {({ isExpanded }) => (
                     <>
                       <AccordionButton
-                        textStyle="text-button-md-semibold"
-                        color="grayscale.100"
+                        p={0}
+                        textStyle="display-lg"
+                        color="lilac-0"
                       >
-                        <Gear
-                          marginRight={3}
-                          transform={`rotate(-${isExpanded ? '0' : '90'}deg)`}
-                        />
+                        {isExpanded ? <CaretDown /> : <CaretRight />}
                         {t('advanced', { ns: 'common' })}
                       </AccordionButton>
-                      <AccordionPanel paddingBottom={4}>
+                      <AccordionPanel p={0}>
                         <LabelComponent
                           label={t('labelParentAllocation')}
                           helper={t('helperParentAllocation')}
diff --git a/src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx b/src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx
index 03ec1f5ac3..93f0b60696 100644
--- a/src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx
+++ b/src/components/DaoCreator/formComponents/AzoriusTokenDetails.tsx
@@ -1,18 +1,20 @@
 import { Box, Flex, Input, RadioGroup, Text } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
+import { Info } from '@phosphor-icons/react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { erc20Abi, getContract, isAddress, zeroAddress } from 'viem';
 import { usePublicClient, useWalletClient } from 'wagmi';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { createAccountSubstring } from '../../../hooks/utils/useDisplayName';
-import { TokenCreationType, ICreationStepProps } from '../../../types';
+import { TokenCreationType, ICreationStepProps, CreatorSteps } from '../../../types';
 import SupportTooltip from '../../ui/badges/SupportTooltip';
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import { LabelComponent } from '../../ui/forms/InputComponent';
 import { RadioWithText } from '../../ui/forms/Radio/RadioWithText';
+import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 import { usePrepareFormData } from '../hooks/usePrepareFormData';
+import { AzoriusTokenAllocations } from './AzoriusTokenAllocations';
 import { VotesTokenImport } from './VotesTokenImport';
 import { VotesTokenNew } from './VotesTokenNew';
 
@@ -115,20 +117,18 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
           flexDirection="column"
           gap={4}
         >
-          <ContentBoxTitle>{t('titleSelectToken')}</ContentBoxTitle>
+          <ContentBoxTitle>{t('titleTokenSupply')}</ContentBoxTitle>
           <LabelComponent
+            label={t('labelSelectToken')}
             helper={t('helperSelectToken')}
-            isRequired={false}
+            isRequired
           >
             <RadioGroup
-              bg={BACKGROUND_SEMI_TRANSPARENT}
-              px={8}
-              py={4}
-              rounded="lg"
               display="flex"
               flexDirection="column"
               name="erc20Token.tokenCreationType"
               gap={4}
+              mt="-0.5rem" // RadioGroup renders empty paragraph with margin, seems like this is only feasible way to align this group
               id="erc20Token.tokenCreationType"
               value={values.erc20Token.tokenCreationType}
               onChange={value => {
@@ -166,12 +166,14 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
                         ? errors.erc20Token.tokenImportAddress
                         : undefined
                     }
+                    isRequired
                   >
                     <Input
                       name="erc20Token.tokenImportAddress"
                       onChange={handleChange}
                       value={values.erc20Token.tokenImportAddress}
                       placeholder={createAccountSubstring(zeroAddress)}
+                      isRequired
                     />
                   </LabelWrapper>
                   {!isImportedVotesToken && !errors.erc20Token?.tokenImportAddress && (
@@ -179,17 +181,18 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
                       gap={4}
                       alignItems="center"
                     >
+                      <SupportTooltip
+                        IconComponent={Info}
+                        label={t('warningExistingTokenTooltip')}
+                        color="neutral-7"
+                      />
                       <Text
-                        color="blue.400"
-                        textStyle="text-base-sans-medium"
+                        color="neutral-7"
+                        textStyle="helper-text-base"
                         whiteSpace="pre-wrap"
                       >
                         {t('warningExistingToken')}
                       </Text>
-                      <SupportTooltip
-                        label={t('warningExistingTokenTooltip')}
-                        color="blue.400"
-                      />
                     </Flex>
                   )}
                 </>
@@ -199,14 +202,28 @@ export function AzoriusTokenDetails(props: ICreationStepProps) {
         </Flex>
       </StepWrapper>
       <Box
-        bg={BACKGROUND_SEMI_TRANSPARENT}
-        rounded="lg"
-        mt={8}
-        px={4}
-        py={8}
+        mt="1.5rem"
+        padding="1.5rem"
+        bg="neutral-2"
+        borderRadius="0.25rem"
       >
         <TokenConfigDisplay {...props} />
       </Box>
+      {values.erc20Token.tokenCreationType === TokenCreationType.NEW && (
+        <Box
+          mt="1.5rem"
+          padding="1.5rem"
+          bg="neutral-2"
+          borderRadius="0.25rem"
+        >
+          <AzoriusTokenAllocations {...props} />
+        </Box>
+      )}
+      <StepButtons
+        {...props}
+        prevStep={CreatorSteps.ESSENTIALS}
+        nextStep={CreatorSteps.AZORIUS_DETAILS}
+      />
     </>
   );
 }
diff --git a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
index 0349479ea5..4c145ebead 100644
--- a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
+++ b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
@@ -1,9 +1,8 @@
 import { ens_normalize } from '@adraffy/ens-normalize';
-import { Box, Divider, Input, RadioGroup } from '@chakra-ui/react';
+import { Box, Input, RadioGroup } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
 import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { URL_DOCS_GOV_TYPES } from '../../../constants/url';
 import { createAccountSubstring } from '../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../providers/App/AppProvider';
@@ -77,7 +76,7 @@ export function EstablishEssentials(props: ICreationStepProps) {
       ens_normalize(value);
       setSnapshotSpaceValid(true);
     } catch (error) {
-      console.log(error);
+      console.warn(error);
       setSnapshotSpaceValid(false);
     }
   };
@@ -85,121 +84,114 @@ export function EstablishEssentials(props: ICreationStepProps) {
   const { createOptions } = useNetworkConfig();
 
   return (
-    <StepWrapper
-      mode={mode}
-      isSubDAO={isSubDAO}
-      isFormSubmitting={!!isSubmitting || transactionPending}
-      titleKey="titleEssentials"
-    >
-      <InputComponent
-        label={t('labelFractalName')}
-        helper={t('helperFractalName')}
-        isRequired
-        value={values.essentials.daoName}
-        id="searchEssentials-daoName"
-        onChange={cEvent => setFieldValue('essentials.daoName', cEvent.target.value, true)}
-        onBlur={cEvent => setFieldValue('essentials.daoName', cEvent.target.value.trim(), true)}
-        disabled={daoNameDisabled}
-        placeholder={t('daoNamePlaceholder')}
-        testId="essentials-daoName"
-      />
-      <Box my={8}>
-        <LabelComponent
-          label={t('labelChooseGovernance')}
-          helper={t('helperChooseGovernance')}
+    <>
+      <StepWrapper
+        mode={mode}
+        isSubDAO={isSubDAO}
+        isFormSubmitting={!!isSubmitting || transactionPending}
+        titleKey="titleEssentials"
+      >
+        <InputComponent
+          label={t('labelDAOName')}
+          helper={t('helperDAOName')}
           isRequired
+          value={values.essentials.daoName}
+          id="searchEssentials-daoName"
+          onChange={cEvent => setFieldValue('essentials.daoName', cEvent.target.value, true)}
+          onBlur={cEvent => setFieldValue('essentials.daoName', cEvent.target.value.trim(), true)}
+          disabled={daoNameDisabled}
+          placeholder={t('daoNamePlaceholder')}
+          testId="essentials-daoName"
+        />
+        <Box
+          mt="2rem"
+          mb="1.5rem"
         >
-          <RadioGroup
-            bg={BACKGROUND_SEMI_TRANSPARENT}
-            px={8}
-            py={4}
-            rounded="lg"
-            display="flex"
-            flexDirection="column"
-            name="governance"
-            gap={4}
-            id="governance"
-            value={values.essentials.governance}
-            onChange={handleGovernanceChange}
+          <LabelComponent
+            label={t('labelChooseGovernance')}
+            helper={t('helperChooseGovernance')}
+            isRequired
           >
-            {createOptions.includes(GovernanceType.MULTISIG) && (
-              <RadioWithText
-                label={t('labelMultisigGov')}
-                description={t('descMultisigGov')}
-                testId="choose-multisig"
-                value={GovernanceType.MULTISIG}
-                tooltip={
-                  <Trans
-                    i18nKey="tooltipMultisig"
-                    ns="daoCreate"
-                  >
-                    placeholder
-                    <ExternalLink href={URL_DOCS_GOV_TYPES}>link</ExternalLink>
-                  </Trans>
-                }
-              />
-            )}
-            {createOptions.includes(GovernanceType.AZORIUS_ERC20) && (
-              <RadioWithText
-                label={t('labelAzoriusErc20Gov')}
-                description={t('descAzoriusErc20Gov')}
-                testId="choose-azorius"
-                value={GovernanceType.AZORIUS_ERC20}
-                tooltip={
-                  <Trans
-                    i18nKey="tooltipTokenVoting"
-                    ns="daoCreate"
-                  >
-                    placeholder
-                    <ExternalLink href={URL_DOCS_GOV_TYPES}>link</ExternalLink>
-                  </Trans>
-                }
-              />
-            )}
-            {createOptions.includes(GovernanceType.AZORIUS_ERC721) && (
-              <RadioWithText
-                label={t('labelAzoriusErc721Gov')}
-                description={t('descAzoriusErc721Gov')}
-                testId="choose-azorius-erc721"
-                value={GovernanceType.AZORIUS_ERC721}
-                tooltip={
-                  <Trans
-                    i18nKey="tooltipNftVoting"
-                    ns="daoCreate"
-                  >
-                    placeholder
-                    <ExternalLink href={URL_DOCS_GOV_TYPES}>link</ExternalLink>
-                  </Trans>
-                }
-              />
-            )}
-          </RadioGroup>
+            <RadioGroup
+              display="flex"
+              flexDirection="column"
+              name="governance"
+              gap={4}
+              mt="-0.5rem" // RadioGroup renders empty paragraph with margin, seems like this is only feasible way to align this group
+              id="governance"
+              value={values.essentials.governance}
+              onChange={handleGovernanceChange}
+            >
+              {createOptions.includes(GovernanceType.MULTISIG) && (
+                <RadioWithText
+                  label={t('labelMultisigGov')}
+                  description={t('descMultisigGov')}
+                  testId="choose-multisig"
+                  value={GovernanceType.MULTISIG}
+                  tooltip={
+                    <Trans
+                      i18nKey="tooltipMultisig"
+                      ns="daoCreate"
+                    >
+                      placeholder
+                      <ExternalLink href={URL_DOCS_GOV_TYPES}>link</ExternalLink>
+                    </Trans>
+                  }
+                />
+              )}
+              {createOptions.includes(GovernanceType.AZORIUS_ERC20) && (
+                <RadioWithText
+                  label={t('labelAzoriusErc20Gov')}
+                  description={t('descAzoriusErc20Gov')}
+                  testId="choose-azorius"
+                  value={GovernanceType.AZORIUS_ERC20}
+                  tooltip={
+                    <Trans
+                      i18nKey="tooltipTokenVoting"
+                      ns="daoCreate"
+                    >
+                      placeholder
+                      <ExternalLink href={URL_DOCS_GOV_TYPES}>link</ExternalLink>
+                    </Trans>
+                  }
+                />
+              )}
+              {createOptions.includes(GovernanceType.AZORIUS_ERC721) && (
+                <RadioWithText
+                  label={t('labelAzoriusErc721Gov')}
+                  description={t('descAzoriusErc721Gov')}
+                  testId="choose-azorius-erc721"
+                  value={GovernanceType.AZORIUS_ERC721}
+                  tooltip={
+                    <Trans
+                      i18nKey="tooltipNftVoting"
+                      ns="daoCreate"
+                    >
+                      placeholder
+                      <ExternalLink href={URL_DOCS_GOV_TYPES}>link</ExternalLink>
+                    </Trans>
+                  }
+                />
+              )}
+            </RadioGroup>
+          </LabelComponent>
+        </Box>
+        <LabelComponent
+          label={t('snapshot')}
+          helper={t('snapshotHelper')}
+          isRequired={false}
+        >
+          <LabelWrapper errorMessage={errors?.essentials?.snapshotENS}>
+            <Input
+              value={values.essentials.snapshotENS}
+              onChange={cEvent => handleSnapshotSpaceChange(cEvent.target.value)}
+              isDisabled={snapshotENSDisabled}
+              data-testid="essentials-snapshotENS"
+              placeholder="example.eth"
+            />
+          </LabelWrapper>
         </LabelComponent>
-      </Box>
-      <Divider
-        color="chocolate.700"
-        mb="2rem"
-      />
-      <LabelComponent
-        label={t('snapshot')}
-        helper={t('snapshotHelper')}
-        isRequired={false}
-      >
-        <LabelWrapper errorMessage={errors?.essentials?.snapshotENS}>
-          <Input
-            value={values.essentials.snapshotENS}
-            onChange={cEvent => handleSnapshotSpaceChange(cEvent.target.value)}
-            isDisabled={snapshotENSDisabled}
-            data-testid="essentials-snapshotENS"
-            placeholder="example.eth"
-          />
-        </LabelWrapper>
-      </LabelComponent>
-      <Divider
-        color="chocolate.700"
-        mt="2rem"
-        mb="2rem"
-      />
+      </StepWrapper>
       <StepButtons
         {...props}
         isNextDisabled={
@@ -216,6 +208,6 @@ export function EstablishEssentials(props: ICreationStepProps) {
               : CreatorSteps.ERC721_DETAILS
         }
       />
-    </StepWrapper>
+    </>
   );
 }
diff --git a/src/components/DaoCreator/formComponents/GuardDetails.tsx b/src/components/DaoCreator/formComponents/GuardDetails.tsx
index 13fda496fe..0a6b703cfa 100644
--- a/src/components/DaoCreator/formComponents/GuardDetails.tsx
+++ b/src/components/DaoCreator/formComponents/GuardDetails.tsx
@@ -1,13 +1,5 @@
-import {
-  Text,
-  InputGroup,
-  InputRightElement,
-  Flex,
-  Alert,
-  AlertTitle,
-  Divider,
-} from '@chakra-ui/react';
-import { Info } from '@decent-org/fractal-ui';
+import { Text, InputGroup, InputRightElement, Flex, Alert } from '@chakra-ui/react';
+import { Info } from '@phosphor-icons/react';
 import { useEffect, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
@@ -24,6 +16,7 @@ import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { CustomNonceInput } from '../../ui/forms/CustomNonceInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
+import Divider from '../../ui/utils/Divider';
 import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 import { DAOCreateMode } from './EstablishEssentials';
@@ -126,166 +119,158 @@ function GuardDetails(props: ICreationStepProps) {
     : null;
 
   return (
-    <StepWrapper
-      mode={mode}
-      isSubDAO={isSubDAO}
-      isFormSubmitting={!!isSubmitting || transactionPending}
-      titleKey="titleGuardConfig"
-    >
-      <Flex
-        flexDirection="column"
-        gap={8}
+    <>
+      <StepWrapper
+        mode={mode}
+        isSubDAO={isSubDAO}
+        isFormSubmitting={!!isSubmitting || transactionPending}
+        titleKey="titleGuardConfig"
       >
-        {governanceFormType === GovernanceType.MULTISIG && (
-          <>
-            <ContentBoxTitle>{t('titleProposalSettings')}</ContentBoxTitle>
-            <LabelComponent
-              label={t('labelTimelockPeriod')}
-              helper={t('helperTimelockPeriod')}
-              isRequired
-            >
-              <InputGroup>
-                <BigIntInput
-                  value={values.freeze.timelockPeriod.bigintValue}
-                  onChange={valuePair => setFieldValue('freeze.timelockPeriod', valuePair)}
-                  decimalPlaces={0}
-                  min="1"
-                  data-testid="guardConfig-executionDetails"
-                />
-                <InputRightElement mr="4">{minutes}</InputRightElement>
-              </InputGroup>
-              <Text
-                textStyle="text-md-sans-regular"
-                color="grayscale.500"
-                mt={2}
+        <Flex
+          flexDirection="column"
+          gap={8}
+        >
+          {governanceFormType === GovernanceType.MULTISIG && (
+            <>
+              <ContentBoxTitle>{t('titleProposalSettings')}</ContentBoxTitle>
+              <LabelComponent
+                label={t('labelTimelockPeriod')}
+                helper={t('helperTimelockPeriod')}
+                isRequired
               >
-                {t('exampleTimelockPeriod')}
-              </Text>
-            </LabelComponent>
-            <LabelComponent
-              label={t('labelExecutionPeriod')}
-              helper={t('helperExecutionPeriod')}
-              isRequired
-            >
-              <InputGroup>
-                <BigIntInput
-                  value={values.freeze.executionPeriod.bigintValue}
-                  onChange={valuePair => setFieldValue('freeze.executionPeriod', valuePair)}
-                  decimalPlaces={0}
-                  min="1"
-                  data-testid="guardConfig-executionDetails"
-                />
-                <InputRightElement mr="4">{minutes}</InputRightElement>
-              </InputGroup>
-              <Text
-                textStyle="text-md-sans-regular"
-                color="grayscale.500"
-                mt={2}
+                <InputGroup>
+                  <BigIntInput
+                    value={values.freeze.timelockPeriod.bigintValue}
+                    onChange={valuePair => setFieldValue('freeze.timelockPeriod', valuePair)}
+                    decimalPlaces={0}
+                    min="1"
+                    data-testid="guardConfig-executionDetails"
+                  />
+                  <InputRightElement mr="4">{minutes}</InputRightElement>
+                </InputGroup>
+                <Text
+                  textStyle="helper-text-base"
+                  color="neutral-7"
+                  mt="0.5rem"
+                >
+                  {t('exampleTimelockPeriod')}
+                </Text>
+              </LabelComponent>
+              <LabelComponent
+                label={t('labelExecutionPeriod')}
+                helper={t('helperExecutionPeriod')}
+                isRequired
               >
-                {t('exampleExecutionPeriod')}
-              </Text>
-            </LabelComponent>
-          </>
-        )}
-        <ContentBoxTitle>{t('titleFreezeParams')}</ContentBoxTitle>
-        <LabelComponent
-          label={t('labelFreezeVotesThreshold')}
-          helper={freezeHelper || ''}
-          isRequired
-        >
-          <BigIntInput
-            value={values.freeze.freezeVotesThreshold.bigintValue}
-            onChange={valuePair => setFieldValue('freeze.freezeVotesThreshold', valuePair)}
-            decimalPlaces={0}
-            data-testid="guardConfig-freezeVotesThreshold"
-          />
-        </LabelComponent>
-        <LabelComponent
-          label={t('labelFreezeProposalPeriod')}
-          helper={t('helperFreezeProposalPeriod')}
-          isRequired
-        >
-          <InputGroup>
-            <BigIntInput
-              value={values.freeze.freezeProposalPeriod.bigintValue}
-              onChange={valuePair => setFieldValue('freeze.freezeProposalPeriod', valuePair)}
-              decimalPlaces={0}
-              min="1"
-              data-testid="guardConfig-freezeProposalDuration"
-            />
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
+                <InputGroup>
+                  <BigIntInput
+                    value={values.freeze.executionPeriod.bigintValue}
+                    onChange={valuePair => setFieldValue('freeze.executionPeriod', valuePair)}
+                    decimalPlaces={0}
+                    min="1"
+                    data-testid="guardConfig-executionDetails"
+                  />
+                  <InputRightElement mr="4">{minutes}</InputRightElement>
+                </InputGroup>
+                <Text
+                  textStyle="helper-text-base"
+                  color="neutral-7"
+                  mt="0.5rem"
+                >
+                  {t('exampleExecutionPeriod')}
+                </Text>
+              </LabelComponent>
+            </>
+          )}
+          <ContentBoxTitle>{t('titleFreezeParams')}</ContentBoxTitle>
+          <LabelComponent
+            label={t('labelFreezeVotesThreshold')}
+            helper={freezeHelper || ''}
+            isRequired
           >
-            {t('exampleFreezeProposalPeriod')}
-          </Text>
-        </LabelComponent>
-        <LabelComponent
-          label={t('labelFreezePeriod')}
-          helper={t('helperFreezePeriod')}
-          isRequired
-        >
-          <InputGroup>
             <BigIntInput
-              value={values.freeze.freezePeriod.bigintValue}
-              onChange={valuePair => setFieldValue('freeze.freezePeriod', valuePair)}
+              value={values.freeze.freezeVotesThreshold.bigintValue}
+              onChange={valuePair => setFieldValue('freeze.freezeVotesThreshold', valuePair)}
               decimalPlaces={0}
-              min="1"
-              data-testid="guardConfig-freezeDuration"
+              data-testid="guardConfig-freezeVotesThreshold"
             />
-
-            <InputRightElement mr="4">{minutes}</InputRightElement>
-          </InputGroup>
-          <Text
-            textStyle="text-md-sans-regular"
-            color="grayscale.500"
-            mt={2}
+          </LabelComponent>
+          <LabelComponent
+            label={t('labelFreezeProposalPeriod')}
+            helper={t('helperFreezeProposalPeriod')}
+            isRequired
           >
-            {t('exampleFreezePeriod')}
-          </Text>
-        </LabelComponent>
-        <Alert status="info">
-          <Info boxSize="24px" />
-          <AlertTitle>
+            <InputGroup>
+              <BigIntInput
+                value={values.freeze.freezeProposalPeriod.bigintValue}
+                onChange={valuePair => setFieldValue('freeze.freezeProposalPeriod', valuePair)}
+                decimalPlaces={0}
+                min="1"
+                data-testid="guardConfig-freezeProposalDuration"
+              />
+              <InputRightElement mr="4">{minutes}</InputRightElement>
+            </InputGroup>
             <Text
-              textStyle="text-lg-mono-medium"
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleFreezeProposalPeriod')}
+            </Text>
+          </LabelComponent>
+          <LabelComponent
+            label={t('labelFreezePeriod')}
+            helper={t('helperFreezePeriod')}
+            isRequired
+          >
+            <InputGroup>
+              <BigIntInput
+                value={values.freeze.freezePeriod.bigintValue}
+                onChange={valuePair => setFieldValue('freeze.freezePeriod', valuePair)}
+                decimalPlaces={0}
+                min="1"
+                data-testid="guardConfig-freezeDuration"
+              />
+
+              <InputRightElement mr="4">{minutes}</InputRightElement>
+            </InputGroup>
+            <Text
+              textStyle="helper-text-base"
+              color="neutral-7"
+              mt="0.5rem"
+            >
+              {t('exampleFreezePeriod')}
+            </Text>
+          </LabelComponent>
+          <Alert status="info">
+            <Info size="24" />
+            <Text
+              textStyle="body-base-strong"
               whiteSpace="pre-wrap"
             >
               {t('freezeGuardDescription')}
             </Text>
-          </AlertTitle>
-        </Alert>
-        <Divider
-          color="chocolate.700"
-          mb={4}
-        />
-        {showCustomNonce && (
-          <>
+          </Alert>
+          <Divider mb={4} />
+          {showCustomNonce && (
             <CustomNonceInput
               nonce={values.multisig.customNonce}
               onChange={handleNonceChange}
+              renderTrimmed={false}
             />
-            <Divider
-              color="chocolate.700"
-              my={4}
-            />
-          </>
-        )}
-        <StepButtons
-          {...props}
-          prevStep={
-            governanceFormType === GovernanceType.MULTISIG
-              ? CreatorSteps.MULTISIG_DETAILS
-              : CreatorSteps.AZORIUS_DETAILS
-          }
-          isEdit={mode === DAOCreateMode.EDIT}
-          isLastStep
-        />
-      </Flex>
-    </StepWrapper>
+          )}
+        </Flex>
+      </StepWrapper>
+      <StepButtons
+        {...props}
+        prevStep={
+          governanceFormType === GovernanceType.MULTISIG
+            ? CreatorSteps.MULTISIG_DETAILS
+            : CreatorSteps.AZORIUS_DETAILS
+        }
+        isEdit={mode === DAOCreateMode.EDIT}
+        isLastStep
+      />
+    </>
   );
 }
 
diff --git a/src/components/DaoCreator/formComponents/Multisig.tsx b/src/components/DaoCreator/formComponents/Multisig.tsx
index cfc9ab86bb..e2128872d1 100644
--- a/src/components/DaoCreator/formComponents/Multisig.tsx
+++ b/src/components/DaoCreator/formComponents/Multisig.tsx
@@ -1,13 +1,6 @@
-import {
-  Box,
-  Divider,
-  Flex,
-  Grid,
-  IconButton,
-  NumberInput,
-  NumberInputField,
-} from '@chakra-ui/react';
-import { LabelWrapper, Minus } from '@decent-org/fractal-ui';
+import { Box, Flex, Grid, IconButton, NumberInput, NumberInputField } from '@chakra-ui/react';
+import { LabelWrapper } from '@decent-org/fractal-ui';
+import { MinusCircle } from '@phosphor-icons/react';
 import { Field, FieldAttributes } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { ICreationStepProps, CreatorSteps } from '../../../types';
@@ -78,102 +71,94 @@ export function Multisig(props: ICreationStepProps) {
   };
 
   return (
-    <StepWrapper
-      mode={mode}
-      isSubDAO={isSubDAO}
-      isFormSubmitting={!!isSubmitting || transactionPending}
-      titleKey="titleSafeConfig"
-    >
-      <Flex
-        flexDirection="column"
-        gap={4}
+    <>
+      <StepWrapper
+        mode={mode}
+        isSubDAO={isSubDAO}
+        isFormSubmitting={!!isSubmitting || transactionPending}
+        titleKey="titleSafeConfig"
       >
-        <LabelComponent
-          label={t('labelSigners')}
-          helper={t('helperSigners')}
-          isRequired
+        <Flex
+          flexDirection="column"
+          gap={4}
         >
-          <NumberInput
-            value={values.multisig.numOfSigners}
-            onChange={value => validateTotalSigners(value)}
-          >
-            <NumberInputField data-testid="safeConfig-numberOfSignerInput" />
-          </NumberInput>
-        </LabelComponent>
-        <LabelComponent
-          label={t('labelSigThreshold')}
-          helper={t('helperSigThreshold')}
-          errorMessage={
-            values.multisig.signatureThreshold ? errors.multisig?.signatureThreshold : undefined
-          }
-          isRequired
-        >
-          <NumberInput
-            value={values.multisig.signatureThreshold}
-            onChange={value => validateNumber(value, 'multisig.signatureThreshold')}
+          <LabelComponent
+            label={t('labelSigners')}
+            helper={t('helperSigners')}
+            isRequired
           >
-            <NumberInputField data-testid="safeConfig-thresholdInput" />
-          </NumberInput>
-        </LabelComponent>
-        <Box my={4}>
+            <NumberInput
+              value={values.multisig.numOfSigners}
+              onChange={value => validateTotalSigners(value)}
+            >
+              <NumberInputField data-testid="safeConfig-numberOfSignerInput" />
+            </NumberInput>
+          </LabelComponent>
           <LabelComponent
-            label={t('titleSignerAddresses')}
-            helper={t('subTitleSignerAddresses')}
-            isRequired={false}
+            label={t('labelSigThreshold')}
+            helper={t('helperSigThreshold')}
+            errorMessage={
+              values.multisig.signatureThreshold ? errors.multisig?.signatureThreshold : undefined
+            }
+            isRequired
           >
-            {values.multisig.trustedAddresses.map((trustedAddress, i) => {
-              const errorMessage =
-                errors?.multisig?.trustedAddresses?.[i] && trustedAddress.length
-                  ? errors?.multisig?.trustedAddresses?.[i]
-                  : null;
+            <NumberInput
+              value={values.multisig.signatureThreshold}
+              onChange={value => validateNumber(value, 'multisig.signatureThreshold')}
+            >
+              <NumberInputField data-testid="safeConfig-thresholdInput" />
+            </NumberInput>
+          </LabelComponent>
+          <Box my={4}>
+            <LabelComponent
+              label={t('titleSignerAddresses')}
+              helper={t('subTitleSignerAddresses')}
+              isRequired={false}
+            >
+              {values.multisig.trustedAddresses.map((trustedAddress, i) => {
+                const errorMessage =
+                  errors?.multisig?.trustedAddresses?.[i] && trustedAddress.length
+                    ? errors?.multisig?.trustedAddresses?.[i]
+                    : null;
 
-              return (
-                <LabelWrapper
-                  key={i}
-                  errorMessage={errorMessage}
-                >
-                  <Grid
-                    templateColumns="minmax(auto, 100%) minmax(auto, 1fr)"
-                    alignItems="center"
+                return (
+                  <LabelWrapper
+                    key={i}
+                    errorMessage={errorMessage}
                   >
-                    <Field name={`multisig.trustedAddresses.${i}`}>
-                      {({ field }: FieldAttributes<any>) => (
-                        <AddressInput
-                          {...field}
-                          data-testid={'safeConfig-signer-' + i}
+                    <Grid
+                      templateColumns="minmax(auto, 100%) minmax(auto, 1fr)"
+                      alignItems="center"
+                    >
+                      <Field name={`multisig.trustedAddresses.${i}`}>
+                        {({ field }: FieldAttributes<any>) => (
+                          <AddressInput
+                            {...field}
+                            data-testid={'safeConfig-signer-' + i}
+                          />
+                        )}
+                      </Field>
+                      {values.multisig.trustedAddresses.length > 1 && (
+                        <IconButton
+                          aria-label="remove allocation"
+                          variant="unstyled"
+                          minW={16}
+                          icon={<MinusCircle size="24" />}
+                          type="button"
+                          onClick={async () => {
+                            deleteIndex(i);
+                          }}
+                          data-testid={'multisig.numOfSigners-' + i}
                         />
                       )}
-                    </Field>
-                    {values.multisig.trustedAddresses.length > 1 && (
-                      <IconButton
-                        aria-label="remove allocation"
-                        variant="unstyled"
-                        minW={16}
-                        icon={
-                          <Minus
-                            color="gold.500"
-                            boxSize="1.5rem"
-                          />
-                        }
-                        type="button"
-                        onClick={async () => {
-                          deleteIndex(i);
-                        }}
-                        data-testid={'multisig.numOfSigners-' + i}
-                      />
-                    )}
-                  </Grid>
-                </LabelWrapper>
-              );
-            })}
-          </LabelComponent>
-        </Box>
-      </Flex>
-      <Divider
-        color="chocolate.700"
-        mt="2rem"
-        mb="2rem"
-      />
+                    </Grid>
+                  </LabelWrapper>
+                );
+              })}
+            </LabelComponent>
+          </Box>
+        </Flex>
+      </StepWrapper>
       <StepButtons
         {...props}
         nextStep={CreatorSteps.FREEZE_DETAILS}
@@ -181,6 +166,6 @@ export function Multisig(props: ICreationStepProps) {
         isLastStep={!isSubDAO}
         isEdit={mode === DAOCreateMode.EDIT}
       />
-    </StepWrapper>
+    </>
   );
 }
diff --git a/src/components/DaoCreator/formComponents/VotesTokenImport.tsx b/src/components/DaoCreator/formComponents/VotesTokenImport.tsx
index 64cb0901ef..9ec0b7b88f 100644
--- a/src/components/DaoCreator/formComponents/VotesTokenImport.tsx
+++ b/src/components/DaoCreator/formComponents/VotesTokenImport.tsx
@@ -1,10 +1,9 @@
 import { Flex, Input } from '@chakra-ui/react';
 import { Field, FieldAttributes } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { CreatorSteps, ICreationStepProps } from '../../../types';
+import { ICreationStepProps } from '../../../types';
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import { LabelComponent } from '../../ui/forms/InputComponent';
-import { StepButtons } from '../StepButtons';
 
 export function VotesTokenImport(props: ICreationStepProps) {
   const { values, handleChange } = props;
@@ -19,15 +18,14 @@ export function VotesTokenImport(props: ICreationStepProps) {
         label={t('labelTokenName')}
         helper={t('helperTokenName')}
         isRequired
-        disabled={true}
       >
         <Field name="erc20Token.tokenName">
           {({ field }: FieldAttributes<any>) => (
             <Input
               {...field}
-              disabled={true}
               data-testid="tokenVoting-tokenNameInput"
               minWidth="50%"
+              placeholder="Name"
             />
           )}
         </Field>
@@ -36,34 +34,27 @@ export function VotesTokenImport(props: ICreationStepProps) {
         label={t('labelTokenSymbol')}
         helper={t('helperTokenSymbol')}
         isRequired
-        disabled={true}
       >
         <Input
           name="erc20Token.tokenSymbol"
           value={values.erc20Token.tokenSymbol}
           onChange={handleChange}
           data-testid="tokenVoting-tokenSymbolInput"
-          disabled={true}
+          placeholder="TKN"
         />
       </LabelComponent>
       <LabelComponent
         label={t('labelTokenSupply')}
         helper={t('helperTokenSupply')}
         isRequired
-        disabled={true}
       >
         <Input
           value={values.erc20Token.tokenSupply.bigintValue?.toString()}
           onChange={handleChange}
           data-testid="tokenVoting-tokenSupplyInput"
-          disabled={true}
+          placeholder="100,000,000"
         />
       </LabelComponent>
-      <StepButtons
-        {...props}
-        prevStep={CreatorSteps.ESSENTIALS}
-        nextStep={CreatorSteps.AZORIUS_DETAILS}
-      />
     </Flex>
   );
 }
diff --git a/src/components/DaoCreator/formComponents/VotesTokenNew.tsx b/src/components/DaoCreator/formComponents/VotesTokenNew.tsx
index b8dfb8bba4..d6f249ff11 100644
--- a/src/components/DaoCreator/formComponents/VotesTokenNew.tsx
+++ b/src/components/DaoCreator/formComponents/VotesTokenNew.tsx
@@ -1,13 +1,11 @@
-import { Flex, Input, Divider } from '@chakra-ui/react';
+import { Flex, Input } from '@chakra-ui/react';
 import { Field, FieldAttributes } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { useFormHelpers } from '../../../hooks/utils/useFormHelpers';
-import { ICreationStepProps, CreatorSteps } from '../../../types';
+import { ICreationStepProps } from '../../../types';
 import ContentBoxTitle from '../../ui/containers/ContentBox/ContentBoxTitle';
 import { BigIntInput } from '../../ui/forms/BigIntInput';
 import { LabelComponent } from '../../ui/forms/InputComponent';
-import { StepButtons } from '../StepButtons';
-import { AzoriusTokenAllocations } from './AzoriusTokenAllocations';
 
 export function VotesTokenNew(props: ICreationStepProps) {
   const { values, handleChange, setFieldValue } = props;
@@ -30,6 +28,7 @@ export function VotesTokenNew(props: ICreationStepProps) {
               {...field}
               data-testid="tokenVoting-tokenNameInput"
               minWidth="50%"
+              placeholder="Name"
             />
           )}
         </Field>
@@ -45,6 +44,7 @@ export function VotesTokenNew(props: ICreationStepProps) {
           onChange={handleChange}
           maxLength={6}
           data-testid="tokenVoting-tokenSymbolInput"
+          placeholder="TKN"
         />
       </LabelComponent>
       <LabelComponent
@@ -57,19 +57,9 @@ export function VotesTokenNew(props: ICreationStepProps) {
           onChange={valuePair => setFieldValue('erc20Token.tokenSupply', valuePair)}
           data-testid="tokenVoting-tokenSupplyInput"
           onKeyDown={restrictChars}
+          placeholder="100,000,000"
         />
       </LabelComponent>
-      <Divider color="chocolate.700" />
-      <AzoriusTokenAllocations {...props} />
-      <Divider
-        color="chocolate.700"
-        mb={4}
-      />
-      <StepButtons
-        {...props}
-        prevStep={CreatorSteps.ESSENTIALS}
-        nextStep={CreatorSteps.AZORIUS_DETAILS}
-      />
     </Flex>
   );
 }
diff --git a/src/components/DaoCreator/index.tsx b/src/components/DaoCreator/index.tsx
index 646cdd6eeb..4ba4eeaeac 100644
--- a/src/components/DaoCreator/index.tsx
+++ b/src/components/DaoCreator/index.tsx
@@ -1,7 +1,14 @@
 import { Box } from '@chakra-ui/react';
 import { Formik } from 'formik';
 import { useDAOCreateSchema } from '../../hooks/schemas/DAOCreate/useDAOCreateSchema';
-import { DAOTrigger, CreatorFormState, GovernanceType } from '../../types';
+import {
+  DAOTrigger,
+  CreatorFormState,
+  GovernanceType,
+  AzoriusERC20DAO,
+  AzoriusERC721DAO,
+  SafeMultisigDAO,
+} from '../../types';
 import StepController from './StepController';
 import { initialState } from './constants';
 import { DAOCreateMode } from './formComponents/EstablishEssentials';
@@ -30,42 +37,38 @@ function DaoCreator({
           const choosenGovernance = values.essentials.governance;
           const freezeGuard = isSubDAO ? values.freeze : undefined;
 
+          let daoData: SafeMultisigDAO | AzoriusERC20DAO | AzoriusERC721DAO | undefined;
+
           switch (choosenGovernance) {
-            case GovernanceType.MULTISIG: {
-              const data = await prepareMultisigFormData({
+            case GovernanceType.MULTISIG:
+              daoData = await prepareMultisigFormData({
                 ...values.essentials,
                 ...values.multisig,
                 freezeGuard,
               });
-              if (data) {
-                deployDAO(data);
-              }
-              return;
-            }
-            case GovernanceType.AZORIUS_ERC20: {
-              const data = await prepareAzoriusERC20FormData({
+              break;
+
+            case GovernanceType.AZORIUS_ERC20:
+              daoData = await prepareAzoriusERC20FormData({
                 ...values.essentials,
                 ...values.azorius,
                 ...values.erc20Token,
                 freezeGuard,
               });
-              if (data) {
-                deployDAO(data);
-              }
-              return;
-            }
-            case GovernanceType.AZORIUS_ERC721: {
-              const data = await prepareAzoriusERC721FormData({
+              break;
+
+            case GovernanceType.AZORIUS_ERC721:
+              daoData = await prepareAzoriusERC721FormData({
                 ...values.essentials,
                 ...values.azorius,
                 ...values.erc721Token,
                 freezeGuard,
               });
-              if (data) {
-                deployDAO(data);
-              }
-              return;
-            }
+              break;
+          }
+
+          if (daoData) {
+            deployDAO(daoData);
           }
         }}
         isInitialValid={false}
diff --git a/src/components/ProposalBuilder/ProposalDetails.tsx b/src/components/ProposalBuilder/ProposalDetails.tsx
index 69a743d4ca..3659dead7c 100644
--- a/src/components/ProposalBuilder/ProposalDetails.tsx
+++ b/src/components/ProposalBuilder/ProposalDetails.tsx
@@ -1,29 +1,21 @@
-import { Avatar, Box, Divider, HStack, Text, VStack } from '@chakra-ui/react';
+import { Avatar, Box, HStack, Text, VStack } from '@chakra-ui/react';
 import { FormikProps } from 'formik';
-import { Fragment, PropsWithChildren } from 'react';
+import { Fragment, PropsWithChildren, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
 import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
 import Markdown from '../ui/proposal/Markdown';
+import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
+import Divider from '../ui/utils/Divider';
 import '../../assets/css/Markdown.css';
 
-export function TransactionValueContainer({
-  children,
-  isValue = true,
-}: PropsWithChildren<{ isValue?: boolean }>) {
+export function TransactionValueContainer({ children }: PropsWithChildren<{}>) {
   return (
     <Box
-      bg={isValue ? 'black.900' : 'chocolate.800'}
-      borderRadius="8px"
-      px={4}
-      py={2}
+      bg="neutral-2"
+      borderRadius={4}
+      padding={2}
     >
-      <Text
-        color="grayscale.100"
-        fontStyle={isValue ? 'normal' : 'italic'}
-      >
-        {children}
-      </Text>
+      <Text fontStyle="code-snippet-helper">{children}</Text>
     </Box>
   );
 }
@@ -34,27 +26,34 @@ export default function ProposalTemplateDetails({
 }: FormikProps<CreateProposalForm> & { mode: ProposalBuilderMode }) {
   const { t } = useTranslation(['proposalTemplate', 'proposal']);
   const trimmedTitle = proposalMetadata.title?.trim();
+  const [descriptionCollapsed, setDescriptionCollapsed] = useState(true);
 
   return (
     <Box
       rounded="lg"
-      p={4}
-      bg={BACKGROUND_SEMI_TRANSPARENT}
-      width="416px"
+      border="1px solid"
+      borderColor="neutral-3"
+      p={6}
+      maxWidth="400px"
     >
       <VStack
         spacing={3}
         align="left"
       >
-        <Text textStyle="text-lg-mono-medium">{t('preview')}</Text>
-        <Divider color="chocolate.700" />
+        <Text textStyle="display-lg">{t('preview')}</Text>
+        <Divider />
         <HStack justifyContent="space-between">
-          <Text color="grayscale.500">{t('previewTitle')}</Text>
-          <Text textAlign="right">{trimmedTitle}</Text>
+          <Text color="neutral-7">{t('previewTitle')}</Text>
+          <Text
+            textAlign="right"
+            width="66%"
+          >
+            {trimmedTitle}
+          </Text>
         </HStack>
         {mode === ProposalBuilderMode.TEMPLATE && (
           <HStack justifyContent="space-between">
-            <Text color="grayscale.500">{t('previewThumnbail')}</Text>
+            <Text color="neutral-7">{t('previewThumnbail')}</Text>
             {trimmedTitle && (
               <Avatar
                 size="sm"
@@ -68,50 +67,56 @@ export default function ProposalTemplateDetails({
           </HStack>
         )}
         <HStack justifyContent="space-between">
-          <Text color="grayscale.500">{t('proposalTemplateDescription')}</Text>
+          <Text color="neutral-7">{t('proposalTemplateDescription')}</Text>
+          {proposalMetadata.description && (
+            <CeleryButtonWithIcon
+              onClick={() => setDescriptionCollapsed(prevState => !prevState)}
+              text={t(descriptionCollapsed ? 'show' : 'hide', { ns: 'common' })}
+            />
+          )}
+        </HStack>
+        {!descriptionCollapsed && (
           <Markdown
             content={proposalMetadata.description}
-            collapsedLines={2}
+            collapsedLines={100}
           />
-        </HStack>
-        <Divider color="chocolate.700" />
+        )}
+        <Divider />
         {transactions.map((transaction, i) => {
           const valueBiggerThanZero = transaction.ethValue.bigintValue
             ? transaction.ethValue.bigintValue > 0n
             : false;
           return (
             <Fragment key={i}>
-              <Text color="grayscale.500">{t('labelTargetAddress', { ns: 'proposal' })}</Text>
+              <Text color="neutral-7">{t('labelTargetAddress', { ns: 'proposal' })}</Text>
               {transaction.targetAddress && (
                 <TransactionValueContainer>{transaction.targetAddress}</TransactionValueContainer>
               )}
-              <Divider color="chocolate.700" />
-              <Text color="grayscale.500">{t('labelFunctionName', { ns: 'proposal' })}</Text>
+              <Divider />
+              <Text color="neutral-7">{t('labelFunctionName', { ns: 'proposal' })}</Text>
               {transaction.functionName && (
                 <TransactionValueContainer>{transaction.functionName}</TransactionValueContainer>
               )}
               {transaction.parameters.map((parameter, parameterIndex) => (
                 <Fragment key={parameterIndex}>
-                  <Text color="grayscale.500">{t('parameter')}</Text>
+                  <Text color="neutral-7">{t('parameter')}</Text>
                   {parameter.signature && (
                     <TransactionValueContainer>{parameter.signature}</TransactionValueContainer>
                   )}
-                  <Text color="grayscale.500">
-                    {!!parameter.label ? parameter.label : t('value')}
-                  </Text>
+                  <Text color="neutral-7">{!!parameter.label ? parameter.label : t('value')}</Text>
                   {(parameter.label || parameter.value) && (
-                    <TransactionValueContainer isValue={!!parameter.value}>
+                    <TransactionValueContainer>
                       {parameter.value || t('userInput')}
                     </TransactionValueContainer>
                   )}
                 </Fragment>
               ))}
-              <Divider color="chocolate.700" />
+              <Divider />
               <HStack justifyContent="space-between">
-                <Text color="grayscale.500">{t('eth')}</Text>
+                <Text color="neutral-7">{t('eth')}</Text>
                 <Text
                   textAlign="right"
-                  color={valueBiggerThanZero ? 'white' : 'grayscale.500'}
+                  color={valueBiggerThanZero ? 'white-0' : 'neutral-7'}
                   wordBreak="break-all"
                 >
                   {valueBiggerThanZero ? transaction.ethValue.value : 'n/a'}
diff --git a/src/components/ProposalBuilder/ProposalMetadata.tsx b/src/components/ProposalBuilder/ProposalMetadata.tsx
index 65bc1b51ff..d029787426 100644
--- a/src/components/ProposalBuilder/ProposalMetadata.tsx
+++ b/src/components/ProposalBuilder/ProposalMetadata.tsx
@@ -1,79 +1,59 @@
-import { Button, Divider, VStack } from '@chakra-ui/react';
+import { VStack } from '@chakra-ui/react';
 import { FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { CreateProposalState } from '../../types';
 import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
 import { InputComponent, TextareaComponent } from '../ui/forms/InputComponent';
 
 export interface ProposalMetadataProps extends FormikProps<CreateProposalForm> {
-  setFormState: (state: CreateProposalState) => void;
   mode: ProposalBuilderMode;
 }
 
 export default function ProposalMetadata({
   values: { proposalMetadata },
   setFieldValue,
-  errors: { proposalMetadata: proposalMetadataError },
-  setFormState,
   mode,
 }: ProposalMetadataProps) {
   const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']);
   const isProposalMode = mode === ProposalBuilderMode.PROPOSAL;
 
   return (
-    <>
-      <VStack
-        align="left"
-        spacing={4}
-        mt={4}
-      >
-        <InputComponent
-          label={
-            isProposalMode ? t('proposalTitle', { ns: 'proposal' }) : t('proposalTemplateTitle')
-          }
-          helper={
-            isProposalMode
-              ? t('proposalTitleHelper', { ns: 'proposal' })
-              : t('proposalTemplateTitleHelperText')
-          }
-          isRequired
-          value={proposalMetadata.title}
-          onChange={e => setFieldValue('proposalMetadata.title', e.target.value)}
-          disabled={false}
-          testId="metadata.title"
-          maxLength={50}
-        />
-        <TextareaComponent
-          label={
-            isProposalMode
-              ? t('proposalDescription', { ns: 'proposal' })
-              : t('proposalTemplateDescription')
-          }
-          subLabel={t('')}
-          helper={
-            isProposalMode
-              ? t('proposalDescriptionHelper', { ns: 'proposal' })
-              : t('proposalTemplateDescriptionHelperText')
-          }
-          isRequired={false}
-          value={proposalMetadata.description}
-          onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
-          disabled={false}
-          rows={12}
-        />
-      </VStack>
-      <Divider
-        color="chocolate.700"
-        mt={8}
-        mb={6}
+    <VStack
+      align="left"
+      spacing={8}
+      p="1.5rem"
+    >
+      <InputComponent
+        label={isProposalMode ? t('proposalTitle', { ns: 'proposal' }) : t('proposalTemplateTitle')}
+        helper={
+          isProposalMode
+            ? t('proposalTitleHelper', { ns: 'proposal' })
+            : t('proposalTemplateTitleHelperText')
+        }
+        placeholder={t('proposalTitlePlaceholder', { ns: 'proposal' })}
+        isRequired
+        value={proposalMetadata.title}
+        onChange={e => setFieldValue('proposalMetadata.title', e.target.value)}
+        testId="metadata.title"
+        maxLength={50}
       />
-      <Button
-        w="100%"
-        onClick={() => setFormState(CreateProposalState.TRANSACTIONS_FORM)}
-        isDisabled={!!proposalMetadataError || !proposalMetadata.title}
-      >
-        {t('next', { ns: 'common' })}
-      </Button>
-    </>
+      <TextareaComponent
+        label={
+          isProposalMode
+            ? t('proposalDescription', { ns: 'proposal' })
+            : t('proposalTemplateDescription')
+        }
+        subLabel={t('')}
+        helper={
+          isProposalMode
+            ? t('proposalDescriptionHelper', { ns: 'proposal' })
+            : t('proposalTemplateDescriptionHelperText')
+        }
+        placeholder={t('proposalDescriptionPlaceholder', { ns: 'proposal' })}
+        isRequired={false}
+        value={proposalMetadata.description}
+        onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
+        rows={12}
+      />
+    </VStack>
   );
 }
diff --git a/src/components/ProposalBuilder/ProposalTransaction.tsx b/src/components/ProposalBuilder/ProposalTransaction.tsx
index 6793d61d1f..038a938770 100644
--- a/src/components/ProposalBuilder/ProposalTransaction.tsx
+++ b/src/components/ProposalBuilder/ProposalTransaction.tsx
@@ -1,11 +1,26 @@
-import { VStack, HStack, Text, Box, Flex, IconButton } from '@chakra-ui/react';
-import { AddPlus, Minus } from '@decent-org/fractal-ui';
-import { useCallback } from 'react';
+import {
+  VStack,
+  HStack,
+  Text,
+  Box,
+  Flex,
+  IconButton,
+  Accordion,
+  AccordionPanel,
+  AccordionItem,
+  AccordionButton,
+  Radio,
+} from '@chakra-ui/react';
+import { Plus, MinusCircle, CaretDown, CaretRight } from '@phosphor-icons/react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateProposalTransaction, ProposalBuilderMode } from '../../types/proposalBuilder';
+import { scrollToBottom } from '../../utils/ui';
 import ABISelector, { ABIElement } from '../ui/forms/ABISelector';
 import ExampleLabel from '../ui/forms/ExampleLabel';
 import { BigIntComponent, InputComponent } from '../ui/forms/InputComponent';
+import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
+import Divider from '../ui/utils/Divider';
 import { DEFAULT_PROPOSAL_TRANSACTION } from './constants';
 
 interface ProposalTransactionProps {
@@ -29,6 +44,8 @@ export default function ProposalTransaction({
 }: ProposalTransactionProps) {
   const isProposalMode = mode === ProposalBuilderMode.PROPOSAL;
   const { t } = useTranslation(['proposal', 'proposalTemplate', 'common']);
+  const [expandedIndecies, setExpandedIndecies] = useState<number[]>([0]);
+
   const handleABISelectorChange = useCallback(
     (value: ABIElement) => {
       setFieldValue(`transactions.${transactionIndex}.functionName`, value.name);
@@ -47,16 +64,18 @@ export default function ProposalTransaction({
   return (
     <VStack
       align="left"
-      spacing={4}
+      px="1.5rem"
       mt={6}
     >
+      {/* TRANSACTION TARGET ADDRESS */}
       <InputComponent
         label={t('labelTargetAddress')}
         helper={t('helperTargetAddress')}
-        isRequired={true}
+        placeholder="0x0000"
+        isRequired
         disabled={transactionPending}
         subLabel={
-          <HStack>
+          <HStack textStyle="helper-text-base">
             <Text>{t('example', { ns: 'common' })}:</Text>
             <ExampleLabel>yourdomain.eth</ExampleLabel>
             <Text>{t('or', { ns: 'common' })}</Text>
@@ -71,7 +90,7 @@ export default function ProposalTransaction({
         }
       />
       {transaction.targetAddress && (
-        <Box>
+        <Box mt="1.5rem">
           <ABISelector
             target={transaction.targetAddress}
             onChange={handleABISelectorChange}
@@ -79,204 +98,311 @@ export default function ProposalTransaction({
         </Box>
       )}
 
-      <Box
-        backgroundColor="black"
-        borderRadius="4px"
-        px={4}
-        py={8}
-      >
-        <Box pl={10}>
-          <InputComponent
-            label={t('labelFunctionName')}
-            helper={t('helperFunctionName')}
-            isRequired={true}
-            value={transaction.functionName}
-            onChange={e =>
-              setFieldValue(`transactions.${transactionIndex}.functionName`, e.target.value)
-            }
-            disabled={transactionPending}
-            subLabel={
-              <HStack>
-                <Text>{`${t('example', { ns: 'common' })}:`}</Text>
-                <ExampleLabel>transfer</ExampleLabel>
-              </HStack>
-            }
-            errorMessage={transaction.functionName && txFunctionError ? txFunctionError : undefined}
-            testId="transaction.functionName"
-          />
-        </Box>
-        {transaction.parameters.map((parameter, i) => (
-          <Flex
-            key={i}
-            gap={2}
-            mt={6}
-            pl={
-              i !== transaction.parameters.length - 1 && transaction.parameters.length > 1 ? 10 : 0
-            }
-          >
-            {i === transaction.parameters.length - 1 && (
-              <Flex
-                flex={1}
-                alignItems="center"
-                justifyContent="center"
-                bg="black.900"
-                px={2}
-                w="32px"
-                cursor="pointer"
-                onClick={() =>
-                  setFieldValue(`transactions.${transactionIndex}.parameters`, [
-                    ...transaction.parameters,
-                    DEFAULT_PROPOSAL_TRANSACTION,
-                  ])
-                }
-              >
-                <IconButton
-                  aria-label="Add function parameter"
-                  w="16px"
-                  minW="16px"
-                  h="16px"
-                  borderRadius="100%"
-                  variant="secondary"
-                >
-                  <AddPlus />
-                </IconButton>
-              </Flex>
-            )}
-            <Box
-              bg="black.900"
-              padding={6}
+      <Divider my="1.5rem" />
+
+      {/* FUNCTION SPECIFICATION */}
+      <Box>
+        <Text
+          textStyle="display-lg"
+          mb="1.5rem"
+        >
+          {t('functionHeader')}
+        </Text>
+        <InputComponent
+          label={t('labelFunctionName')}
+          helper={t('helperFunctionName')}
+          placeholder="functionName"
+          isRequired={false}
+          value={transaction.functionName}
+          onChange={e =>
+            setFieldValue(`transactions.${transactionIndex}.functionName`, e.target.value)
+          }
+          disabled={transactionPending}
+          subLabel={
+            <HStack>
+              <Text>{`${t('example', { ns: 'common' })}:`}</Text>
+              <ExampleLabel>transfer</ExampleLabel>
+            </HStack>
+          }
+          errorMessage={transaction.functionName && txFunctionError ? txFunctionError : undefined}
+          testId="transaction.functionName"
+        />
+      </Box>
+
+      {/* TRANSACTION PARAMETERS LIST */}
+      <Box mt="1.5rem">
+        <Accordion
+          allowMultiple
+          index={expandedIndecies}
+        >
+          {transaction.parameters.map((parameter, i) => (
+            <AccordionItem
+              key={i}
+              borderTop="none"
+              borderBottom="none"
+              padding="1rem"
+              borderRadius={4}
+              bg="neutral-3"
+              px={0}
+              py="1.5rem"
             >
-              <InputComponent
-                label={t('labelFunctionParameter', { ns: 'proposalTemplate' })}
-                helper={t('helperFunctionParameter', { ns: 'proposalTemplate' })}
-                isRequired
-                value={parameter.signature}
-                onChange={e =>
-                  setFieldValue(
-                    `transactions.${transactionIndex}.parameters.${i}.signature`,
-                    e.target.value,
-                  )
-                }
-                disabled={transactionPending}
-                subLabel={
-                  <HStack>
-                    <Text>
-                      {t('example', { ns: 'common' })}: <ExampleLabel>address to</ExampleLabel>{' '}
-                      {t('or', { ns: 'common' })} <ExampleLabel>uint amount</ExampleLabel>
-                    </Text>
-                  </HStack>
-                }
-                testId={`transactions.${transactionIndex}.parameters.${i}.signature`}
-              />
-              <Flex
-                gap={4}
-                alignItems="center"
-                mt={4}
-              >
-                {!isProposalMode && (
-                  <>
-                    <InputComponent
-                      label={t('labelParameterLabel', { ns: 'proposalTemplate' })}
-                      helper=""
-                      isRequired={!parameter.value}
-                      value={parameter.label || ''}
-                      onChange={e =>
-                        setFieldValue(
-                          `transactions.${transactionIndex}.parameters.${i}.label`,
-                          e.target.value,
-                        )
-                      }
-                      disabled={transactionPending || !!parameter.value}
-                      testId={`transactions.${transactionIndex}.parameters.${i}.label`}
-                      subLabel={
-                        <HStack>
-                          <Text>{t('helperParameterLabel', { ns: 'proposalTemplate' })}</Text>
-                        </HStack>
-                      }
-                      gridContainerProps={{
-                        display: 'inline-flex',
-                        flexWrap: 'wrap',
-                        width: '30%',
-                      }}
-                      inputContainerProps={{
-                        width: '100%',
+              {({ isExpanded }) => (
+                <>
+                  <Box>
+                    {/* TRANSACTION PARAMETER HEADER */}
+                    <HStack
+                      px="1.5rem"
+                      justify="space-between"
+                    >
+                      <AccordionButton
+                        onClick={() => {
+                          setExpandedIndecies(indexArray => {
+                            if (indexArray.includes(i)) {
+                              const newTxArr = [...indexArray];
+                              newTxArr.splice(newTxArr.indexOf(i), 1);
+                              return newTxArr;
+                            } else {
+                              return [...indexArray, i];
+                            }
+                          });
+                        }}
+                        p={0}
+                        textStyle="display-lg"
+                        color="lilac-0"
+                      >
+                        <Text textStyle="display-lg">
+                          <Flex
+                            alignItems="center"
+                            gap={2}
+                          >
+                            {isExpanded ? <CaretDown /> : <CaretRight />}
+                            {t('parameter')} {i + 1}
+                          </Flex>
+                        </Text>
+                      </AccordionButton>
+
+                      {/* Remove parameter button */}
+                      {i !== 0 || transaction.parameters.length !== 1 ? (
+                        <IconButton
+                          icon={<MinusCircle />}
+                          aria-label={t('removetransactionlabel')}
+                          variant="unstyled"
+                          onClick={() =>
+                            setFieldValue(
+                              `transactions.${transactionIndex}.parameters`,
+                              transaction.parameters.filter(
+                                (parameterToRemove, parameterToRemoveIndex) =>
+                                  parameterToRemoveIndex !== i,
+                              ),
+                            )
+                          }
+                          minWidth="auto"
+                          color="lilac-0"
+                          _disabled={{ opacity: 0.4, cursor: 'default' }}
+                          sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }}
+                          isDisabled={transactionPending}
+                        />
+                      ) : (
+                        <Box h="2.25rem" />
+                      )}
+                    </HStack>
+
+                    {/* TRANSACTION PARAMETER SECTION */}
+                    <AccordionPanel p={0}>
+                      <Flex mt="1rem">
+                        <Box px="1.5rem">
+                          <InputComponent
+                            label={t('labelFunctionParameter', { ns: 'proposalTemplate' })}
+                            helper={t('helperFunctionParameter', { ns: 'proposalTemplate' })}
+                            placeholder="parameterType parameterName"
+                            isRequired={!!parameter.value || !!parameter.label}
+                            value={parameter.signature}
+                            onChange={e =>
+                              setFieldValue(
+                                `transactions.${transactionIndex}.parameters.${i}.signature`,
+                                e.target.value,
+                              )
+                            }
+                            disabled={transactionPending}
+                            subLabel={
+                              <HStack>
+                                <Text>
+                                  {t('example', { ns: 'common' })}:{' '}
+                                  <ExampleLabel bg="neutral-4">address to</ExampleLabel>{' '}
+                                  {t('or', { ns: 'common' })}{' '}
+                                  <ExampleLabel bg="neutral-4">uint amount</ExampleLabel>
+                                </Text>
+                              </HStack>
+                            }
+                            testId={`transactions.${transactionIndex}.parameters.${i}.signature`}
+                          />
+                          <Box mt={4}>
+                            <Text
+                              textStyle="body-base"
+                              mb="1.5rem"
+                            >
+                              {t('labelParameterValue', { ns: 'proposalTemplate' })}
+                            </Text>
+                            {!isProposalMode && (
+                              <Box my="1rem">
+                                <InputComponent
+                                  label={
+                                    <Radio
+                                      // TODO: Probably we wanna focus proper input
+                                      onChange={event => {
+                                        event.preventDefault();
+                                      }}
+                                      isChecked={!!parameter.label}
+                                      isDisabled={!parameter.signature || !!parameter.value}
+                                      bg="black-0"
+                                      color="lilac--3"
+                                      size="md"
+                                      _disabled={{ bg: 'neutral-6', color: 'neutral-5' }}
+                                      _hover={{ bg: 'black-0', color: 'lilac--4' }}
+                                      _checked={{
+                                        bg: 'black-0',
+                                        color: 'lilac--3',
+                                        borderWidth: '6px',
+                                      }}
+                                    >
+                                      <Box ml="1rem">
+                                        <Text>
+                                          {t('labelParameterLabel', {
+                                            ns: 'proposalTemplate',
+                                          })}
+                                        </Text>
+                                        <Text color="neutral-7">
+                                          {t('labelParameterLabelHelper', {
+                                            ns: 'proposalTemplate',
+                                          })}
+                                        </Text>
+                                      </Box>
+                                    </Radio>
+                                  }
+                                  isRequired={!!parameter.signature && !parameter.value}
+                                  value={parameter.label || ''}
+                                  placeholder={t('parameterLabelPlaceholder', {
+                                    ns: 'proposalTemplate',
+                                  })}
+                                  onChange={e =>
+                                    setFieldValue(
+                                      `transactions.${transactionIndex}.parameters.${i}.label`,
+                                      e.target.value,
+                                    )
+                                  }
+                                  disabled={transactionPending || !!parameter.value}
+                                  testId={`transactions.${transactionIndex}.parameters.${i}.label`}
+                                  subLabel={
+                                    <HStack>
+                                      <Text>
+                                        {t('helperParameterLabel', { ns: 'proposalTemplate' })}
+                                      </Text>
+                                    </HStack>
+                                  }
+                                />
+                              </Box>
+                            )}
+                            <InputComponent
+                              label={
+                                !isProposalMode ? (
+                                  <Radio
+                                    // TODO: Probably we wanna focus proper input
+                                    onChange={event => {
+                                      event.preventDefault();
+                                    }}
+                                    isChecked={!!parameter.value}
+                                    isDisabled={!parameter.signature || !!parameter.label}
+                                    bg="black-0"
+                                    color="lilac--3"
+                                    size="md"
+                                    _disabled={{ bg: 'neutral-6', color: 'neutral-5' }}
+                                    _hover={{ bg: 'black-0', color: 'lilac--4' }}
+                                    _checked={{
+                                      bg: 'black-0',
+                                      color: 'lilac--3',
+                                      borderWidth: '6px',
+                                    }}
+                                  >
+                                    <Box ml="1rem">
+                                      <Text>
+                                        {t('labelParameterValueWithLabel', {
+                                          ns: 'proposalTemplate',
+                                        })}
+                                      </Text>
+                                      <Text color="neutral-7">
+                                        {t('labelParameterLabelHelper', {
+                                          ns: 'proposalTemplate',
+                                        })}
+                                      </Text>
+                                    </Box>
+                                  </Radio>
+                                ) : undefined
+                              }
+                              isRequired={!!parameter.signature && !parameter.label}
+                              helper={
+                                isProposalMode
+                                  ? t('helperFunctionParameterValue', { ns: 'proposalTemplate' })
+                                  : undefined
+                              }
+                              value={parameter.value || ''}
+                              placeholder="100"
+                              onChange={e =>
+                                setFieldValue(
+                                  `transactions.${transactionIndex}.parameters.${i}.value`,
+                                  e.target.value,
+                                )
+                              }
+                              disabled={transactionPending || !!parameter.label}
+                              subLabel={
+                                <HStack wordBreak="break-all">
+                                  <Text>
+                                    {t('example', { ns: 'common' })}:{' '}
+                                    <ExampleLabel bg="neutral-4">1.2</ExampleLabel>
+                                  </Text>
+                                </HStack>
+                              }
+                              testId={`transactions.${transactionIndex}.parameters.${i}.value`}
+                            />
+                          </Box>
+                          <Divider
+                            variant="light"
+                            my="1rem"
+                          />
+                        </Box>
+                      </Flex>
+                    </AccordionPanel>
+                  </Box>
+
+                  {!isExpanded && (
+                    <Divider
+                      variant="light"
+                      mt="0.5rem"
+                    />
+                  )}
+
+                  {/* ADD PARAMETER BUTTON */}
+                  {i === transaction.parameters.length - 1 && (
+                    <CeleryButtonWithIcon
+                      onClick={() => {
+                        setFieldValue(`transactions.${transactionIndex}.parameters`, [
+                          ...transaction.parameters,
+                          DEFAULT_PROPOSAL_TRANSACTION,
+                        ]);
+                        setExpandedIndecies([transaction.parameters.length]);
+                        scrollToBottom();
                       }}
+                      icon={Plus}
+                      text={t('addParameter')}
                     />
-                    <Text>{t('or', { ns: 'common' })}</Text>
-                  </>
-                )}
-                <InputComponent
-                  label={t('labelParameterValue', { ns: 'proposalTemplate' })}
-                  helper=""
-                  isRequired={!parameter.label}
-                  value={parameter.value || ''}
-                  onChange={e =>
-                    setFieldValue(
-                      `transactions.${transactionIndex}.parameters.${i}.value`,
-                      e.target.value,
-                    )
-                  }
-                  disabled={transactionPending || !!parameter.label}
-                  subLabel={
-                    <HStack wordBreak="break-all">
-                      <Text>
-                        {t('example', { ns: 'common' })}: <ExampleLabel>value</ExampleLabel>
-                        {!isProposalMode && (
-                          <Text as="span">
-                            {t('proposalTemplateLeaveBlank', { ns: 'proposalTemplate' })}
-                          </Text>
-                        )}
-                      </Text>
-                    </HStack>
-                  }
-                  testId={`transactions.${transactionIndex}.parameters.${i}.value`}
-                  gridContainerProps={{
-                    display: 'inline-flex',
-                    flexWrap: 'wrap',
-                    flex: '1',
-                  }}
-                  inputContainerProps={{
-                    width: '100%',
-                  }}
-                />
-              </Flex>
-            </Box>
-            {i !== 0 && (
-              <Flex
-                flex={1}
-                alignItems="center"
-                justifyContent="center"
-                bg="black.900"
-                px={2}
-                w="32px"
-                cursor="pointer"
-                onClick={() =>
-                  setFieldValue(
-                    `transactions.${transactionIndex}.parameters`,
-                    transaction.parameters.filter(
-                      (parameterToRemove, parameterToRemoveIndex) => parameterToRemoveIndex !== i,
-                    ),
-                  )
-                }
-              >
-                <IconButton
-                  aria-label="Remove function parameter"
-                  w="16px"
-                  minW="16px"
-                  h="16px"
-                  borderRadius="100%"
-                  variant="secondary"
-                >
-                  <Minus />
-                </IconButton>
-              </Flex>
-            )}
-          </Flex>
-        ))}
-        <Box
-          mt={6}
-          pl={10}
-        >
+                  )}
+                </>
+              )}
+            </AccordionItem>
+          ))}
+        </Accordion>
+
+        {/* ETH VALUE */}
+        <Box mt={6}>
           <BigIntComponent
             label={t('labelEthValue')}
             helper={t('helperEthValue')}
@@ -284,12 +410,12 @@ export default function ProposalTransaction({
             disabled={transactionPending}
             subLabel={
               <VStack
-                align={'start'}
+                align="start"
                 spacing={0}
               >
                 <HStack>
                   <Text>{`${t('example', { ns: 'common' })}:`}</Text>
-                  <ExampleLabel>{'1.2'}</ExampleLabel>
+                  <ExampleLabel>1.2</ExampleLabel>
                 </HStack>
                 {!isProposalMode && (
                   <Text>{t('ethParemeterHelper', { ns: 'proposalTemplate' })}</Text>
diff --git a/src/components/ProposalBuilder/ProposalTransactions.tsx b/src/components/ProposalBuilder/ProposalTransactions.tsx
index eac985a805..616de96339 100644
--- a/src/components/ProposalBuilder/ProposalTransactions.tsx
+++ b/src/components/ProposalBuilder/ProposalTransactions.tsx
@@ -1,13 +1,15 @@
 import {
   Box,
+  Flex,
   Accordion,
   AccordionButton,
   AccordionItem,
   AccordionPanel,
   HStack,
   IconButton,
+  Text,
 } from '@chakra-ui/react';
-import { ArrowDown, ArrowRight, Minus } from '@decent-org/fractal-ui';
+import { MinusCircle, CaretDown, CaretRight } from '@phosphor-icons/react';
 import { FormikErrors, FormikProps } from 'formik';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -39,7 +41,7 @@ export default function ProposalTransactions({
   const removeTransaction = (transactionIndex: number) => {
     setFieldValue(
       'transactions',
-      transactions.filter((tx, i) => i !== transactionIndex),
+      transactions.filter((_, i) => i !== transactionIndex),
     );
   };
   return (
@@ -61,13 +63,12 @@ export default function ProposalTransactions({
             borderBottom="none"
           >
             {({ isExpanded }) => (
-              <Box
-                rounded="lg"
-                p={3}
-                my="2"
-                bg="black.900"
-              >
-                <HStack justify="space-between">
+              <Box borderRadius={4}>
+                {/* TRANSACTION HEADER */}
+                <HStack
+                  px="1.5rem"
+                  justify="space-between"
+                >
                   <AccordionButton
                     onClick={() => {
                       setExpandedIndecies(indexArray => {
@@ -80,29 +81,37 @@ export default function ProposalTransactions({
                         }
                       });
                     }}
-                    p={0}
-                    textStyle="text-button-md-semibold"
-                    color="grayscale.100"
+                    p="0.25rem"
+                    textStyle="display-lg"
+                    color="lilac-0"
                   >
-                    {isExpanded ? <ArrowDown boxSize="1.5rem" /> : <ArrowRight fontSize="1.5rem" />}
-                    {t('transaction')} {index + 1}
+                    <Text textStyle="display-lg">
+                      <Flex
+                        alignItems="center"
+                        gap={2}
+                      >
+                        {isExpanded ? <CaretDown /> : <CaretRight />}
+                        {t('transaction')} {index + 1}
+                      </Flex>
+                    </Text>
                   </AccordionButton>
                   {index !== 0 || transactions.length !== 1 ? (
                     <IconButton
-                      icon={<Minus boxSize="1.5rem" />}
+                      icon={<MinusCircle />}
                       aria-label={t('removetransactionlabel')}
                       variant="unstyled"
                       onClick={() => removeTransaction(index)}
                       minWidth="auto"
-                      _hover={{ color: 'gold.500' }}
+                      color="lilac-0"
                       _disabled={{ opacity: 0.4, cursor: 'default' }}
                       sx={{ '&:disabled:hover': { color: 'inherit', opacity: 0.4 } }}
-                      disabled={pendingTransaction}
+                      isDisabled={pendingTransaction}
                     />
                   ) : (
                     <Box h="2.25rem" />
                   )}
                 </HStack>
+
                 <AccordionPanel p={0}>
                   <ProposalTransaction
                     transaction={transactions[index] as CreateProposalTransaction}
diff --git a/src/components/ProposalBuilder/ProposalTransactionsForm.tsx b/src/components/ProposalBuilder/ProposalTransactionsForm.tsx
index 25e267eb00..3266ed37fc 100644
--- a/src/components/ProposalBuilder/ProposalTransactionsForm.tsx
+++ b/src/components/ProposalBuilder/ProposalTransactionsForm.tsx
@@ -1,18 +1,17 @@
-import { Button, Box, Flex, Text, VStack, Divider, Alert, AlertTitle } from '@chakra-ui/react';
-import { Info } from '@decent-org/fractal-ui';
+import { Box } from '@chakra-ui/react';
+import { Plus } from '@phosphor-icons/react';
 import { FormikProps } from 'formik';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CreateProposalState } from '../../types';
 import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
 import { scrollToBottom } from '../../utils/ui';
+import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
+import Divider from '../ui/utils/Divider';
 import ProposalTransactions from './ProposalTransactions';
 import { DEFAULT_PROPOSAL_TRANSACTION } from './constants';
 
 interface ProposalTransactionsFormProps extends FormikProps<CreateProposalForm> {
   pendingTransaction: boolean;
-  setFormState: (state: CreateProposalState) => void;
-  canUserCreateProposal?: boolean;
   safeNonce?: number;
   mode: ProposalBuilderMode;
 }
@@ -20,11 +19,8 @@ interface ProposalTransactionsFormProps extends FormikProps<CreateProposalForm>
 export default function ProposalTransactionsForm(props: ProposalTransactionsFormProps) {
   const {
     pendingTransaction,
-    setFormState,
     setFieldValue,
     values: { transactions },
-    errors: { transactions: transactionsError, nonce: nonceError },
-    canUserCreateProposal,
     safeNonce,
   } = props;
   const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']);
@@ -37,68 +33,23 @@ export default function ProposalTransactionsForm(props: ProposalTransactionsForm
   }, [safeNonce, setFieldValue]);
 
   return (
-    <Box>
+    <Box py="1.5rem">
       <ProposalTransactions
         expandedIndecies={expandedIndecies}
         setExpandedIndecies={setExpandedIndecies}
         {...props}
       />
-      <VStack
-        align="left"
-        spacing={6}
-        pt={2}
-      >
-        <Button
-          variant="text"
-          onClick={() => {
-            setFieldValue('transactions', [...transactions, DEFAULT_PROPOSAL_TRANSACTION]);
-            setExpandedIndecies([transactions.length]);
-            scrollToBottom();
-          }}
-          disabled={pendingTransaction}
-          w="fit-content"
-          pl={0}
-        >
-          {t('labelAddTransaction', { ns: 'proposal' })}
-        </Button>
-        <Alert
-          status="info"
-          w="fit-full"
-        >
-          <Info boxSize="1.5rem" />
-          <AlertTitle>
-            <Text
-              textStyle="text-lg-mono-medium"
-              whiteSpace="pre-wrap"
-            >
-              {t('transactionExecutionAlertMessage', { ns: 'proposal' })}
-            </Text>
-          </AlertTitle>
-        </Alert>
-        <Divider color="chocolate.700" />
-        <Flex>
-          <Button
-            variant="text"
-            textStyle="text-md-mono-regular"
-            color="gold.500"
-            cursor="pointer"
-            onClick={() => setFormState(CreateProposalState.METADATA_FORM)}
-            mb={4}
-          >
-            {t('back', { ns: 'common' })}
-          </Button>
-
-          <Button
-            w="100%"
-            type="submit"
-            isDisabled={
-              !canUserCreateProposal || !!transactionsError || !!nonceError || pendingTransaction
-            }
-          >
-            {t('createProposal', { ns: 'proposal' })}
-          </Button>
-        </Flex>
-      </VStack>
+      <Divider my="1.5rem" />
+      <CeleryButtonWithIcon
+        onClick={() => {
+          setFieldValue('transactions', [...transactions, DEFAULT_PROPOSAL_TRANSACTION]);
+          setExpandedIndecies([transactions.length]);
+          scrollToBottom();
+        }}
+        isDisabled={pendingTransaction}
+        icon={Plus}
+        text={t('labelAddTransaction', { ns: 'proposal' })}
+      />
     </Box>
   );
 }
diff --git a/src/components/ProposalBuilder/StateButtons.tsx b/src/components/ProposalBuilder/StateButtons.tsx
new file mode 100644
index 0000000000..d6ff742443
--- /dev/null
+++ b/src/components/ProposalBuilder/StateButtons.tsx
@@ -0,0 +1,75 @@
+import { Flex, Button, Icon } from '@chakra-ui/react';
+import { CaretRight, CaretLeft } from '@phosphor-icons/react';
+import { FormikProps } from 'formik';
+import { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CreateProposalState } from '../../types';
+import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
+
+interface StateButtonsProps extends FormikProps<CreateProposalForm> {
+  pendingTransaction: boolean;
+  formState: CreateProposalState;
+  setFormState: Dispatch<SetStateAction<CreateProposalState>>;
+  canUserCreateProposal?: boolean;
+  safeNonce?: number;
+  mode: ProposalBuilderMode;
+}
+
+export default function StateButtons(props: StateButtonsProps) {
+  const {
+    pendingTransaction,
+    formState,
+    setFormState,
+    errors: {
+      transactions: transactionsError,
+      nonce: nonceError,
+      proposalMetadata: proposalMetadataError,
+    },
+    canUserCreateProposal,
+    values: { proposalMetadata },
+  } = props;
+  const { t } = useTranslation(['common', 'proposal']);
+  if (formState === CreateProposalState.METADATA_FORM) {
+    return (
+      <Button
+        w="100%"
+        onClick={() => setFormState(CreateProposalState.TRANSACTIONS_FORM)}
+        isDisabled={!!proposalMetadataError || !proposalMetadata.title}
+        mt="1.75rem"
+      >
+        {t('next', { ns: 'common' })}
+        <CaretRight />
+      </Button>
+    );
+  }
+  return (
+    <Flex
+      mt="1.5rem"
+      gap="1rem"
+    >
+      <Button
+        width="100%"
+        variant="text"
+        color="lilac-0"
+        onClick={() => setFormState(CreateProposalState.METADATA_FORM)}
+      >
+        <Icon
+          bg="transparent"
+          aria-label="Back"
+          as={CaretLeft}
+          color="lilac-0"
+        />
+        {t('back', { ns: 'common' })}
+      </Button>
+      <Button
+        width="100%"
+        type="submit"
+        isDisabled={
+          !canUserCreateProposal || !!transactionsError || !!nonceError || pendingTransaction
+        }
+      >
+        {t('createProposal', { ns: 'proposal' })}
+      </Button>
+    </Flex>
+  );
+}
diff --git a/src/components/ProposalBuilder/index.tsx b/src/components/ProposalBuilder/index.tsx
index 56330a2b43..994216f72a 100644
--- a/src/components/ProposalBuilder/index.tsx
+++ b/src/components/ProposalBuilder/index.tsx
@@ -1,11 +1,10 @@
-import { Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
-import { Trash } from '@decent-org/fractal-ui';
+import { Box, Flex, Grid, GridItem } from '@chakra-ui/react';
+import { Trash } from '@phosphor-icons/react';
 import { Formik, FormikProps } from 'formik';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
 import { DAO_ROUTES, BASE_ROUTES } from '../../constants/routes';
 import useSubmitProposal from '../../hooks/DAO/proposal/useSubmitProposal';
 import useCreateProposalSchema from '../../hooks/schemas/proposalBuilder/useCreateProposalSchema';
@@ -19,22 +18,19 @@ import PageHeader from '../ui/page/Header/PageHeader';
 import ProposalDetails from './ProposalDetails';
 import ProposalMetadata from './ProposalMetadata';
 import ProposalTransactionsForm from './ProposalTransactionsForm';
+import StateButtons from './StateButtons';
 
-interface IProposalBuilder {
+interface ProposalBuilderProps {
   mode: ProposalBuilderMode;
   prepareProposalData: (values: CreateProposalForm) => Promise<ProposalExecuteData | undefined>;
   initialValues: CreateProposalForm;
 }
 
-const templateAreaTwoCol = '"content details"';
-const templateAreaSingleCol = `"content"
-  "details"`;
-
-export default function ProposalBuilder({
+export function ProposalBuilder({
   mode,
   initialValues,
   prepareProposalData,
-}: IProposalBuilder) {
+}: ProposalBuilderProps) {
   const [formState, setFormState] = useState(CreateProposalState.METADATA_FORM);
   const { t } = useTranslation(['proposalTemplate', 'proposal']);
 
@@ -43,6 +39,7 @@ export default function ProposalBuilder({
   const navigate = useNavigate();
   const {
     node: { daoAddress, safe },
+    readOnly: { dao },
   } = useFractal();
   const { addressPrefix } = useNetworkConfig();
   const { submitProposal, pendingCreateTx } = useSubmitProposal();
@@ -138,11 +135,11 @@ export default function ProposalBuilder({
               />
               <Grid
                 gap={4}
+                marginTop="3rem"
                 templateColumns={{ base: '1fr', lg: '2fr 1fr' }}
-                gridTemplateRows={{ base: '1fr', lg: '5.1em 1fr' }}
                 templateAreas={{
-                  base: templateAreaSingleCol,
-                  lg: templateAreaTwoCol,
+                  base: '"content" "details"',
+                  lg: '"content details"',
                 }}
               >
                 <GridItem area="content">
@@ -153,44 +150,47 @@ export default function ProposalBuilder({
                     <Box
                       marginBottom="2rem"
                       rounded="lg"
-                      p="1rem"
-                      bg={BACKGROUND_SEMI_TRANSPARENT}
+                      bg="neutral-2"
                     >
                       {formState === CreateProposalState.METADATA_FORM ? (
                         <ProposalMetadata
-                          setFormState={setFormState}
                           mode={mode}
                           {...formikProps}
                         />
                       ) : (
-                        <>
-                          <Flex
-                            alignItems="center"
-                            justifyContent="space-between"
-                          >
-                            <Text
-                              textStyle="text-xl-mono-medium"
-                              mb={4}
-                            >
-                              {formikProps.values.proposalMetadata.title}
-                            </Text>
-                            <CustomNonceInput
-                              nonce={formikProps.values.nonce}
-                              onChange={newNonce => formikProps.setFieldValue('nonce', newNonce)}
-                              align="end"
-                            />
-                          </Flex>
-                          <ProposalTransactionsForm
-                            setFormState={setFormState}
-                            canUserCreateProposal={canUserCreateProposal}
-                            pendingTransaction={pendingCreateTx}
-                            safeNonce={safe?.nonce}
-                            mode={mode}
-                            {...formikProps}
-                          />
-                        </>
+                        <ProposalTransactionsForm
+                          pendingTransaction={pendingCreateTx}
+                          safeNonce={safe?.nonce}
+                          mode={mode}
+                          {...formikProps}
+                        />
                       )}
                     </Box>
+                    {formState === CreateProposalState.TRANSACTIONS_FORM && !dao?.isAzorius && (
+                      <Flex
+                        alignItems="center"
+                        justifyContent="space-between"
+                        marginBottom="2rem"
+                        rounded="lg"
+                        p="1.5rem"
+                        bg="neutral-2"
+                      >
+                        <CustomNonceInput
+                          nonce={formikProps.values.nonce}
+                          onChange={newNonce => formikProps.setFieldValue('nonce', newNonce)}
+                          align="end"
+                          renderTrimmed={false}
+                        />
+                      </Flex>
+                    )}
+                    <StateButtons
+                      {...formikProps}
+                      mode={mode}
+                      formState={formState}
+                      setFormState={setFormState}
+                      canUserCreateProposal={canUserCreateProposal}
+                      pendingTransaction={pendingCreateTx}
+                    />
                   </Flex>
                 </GridItem>
                 <GridItem
diff --git a/src/components/ProposalTemplates/ProposalTemplateCard.tsx b/src/components/ProposalTemplates/ProposalTemplateCard.tsx
index fcecd49fdf..8fc12f6d61 100644
--- a/src/components/ProposalTemplates/ProposalTemplateCard.tsx
+++ b/src/components/ProposalTemplates/ProposalTemplateCard.tsx
@@ -1,5 +1,5 @@
-import { Avatar, Flex, Text } from '@chakra-ui/react';
-import { VEllipsis } from '@decent-org/fractal-ui';
+import { Avatar, Flex, Text, Icon } from '@chakra-ui/react';
+import { GearFine } from '@phosphor-icons/react';
 import { useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -104,14 +104,18 @@ export default function ProposalTemplateCard({
           w="50px"
           h="50px"
           name={title}
-          borderRadius="4px"
+          borderRadius={0}
           getInitials={(_title: string) => _title.slice(0, 2)}
+          textStyle="display-2xl"
+          color="white-0"
         />
         <OptionMenu
           trigger={
-            <VEllipsis
-              boxSize="1.5rem"
-              mt="0.25rem"
+            <Icon
+              as={GearFine}
+              color="lilac-0"
+              width="1.25rem"
+              height="1.25rem"
             />
           }
           titleKey="titleManageProposalTemplate"
@@ -120,10 +124,9 @@ export default function ProposalTemplateCard({
         />
       </Flex>
       <Text
-        textStyle="text-lg-mono-regular"
-        color="grayscale.100"
-        marginTop="2rem"
-        marginBottom="0.5rem"
+        textStyle="display-lg"
+        color="white-0"
+        my="0.5rem"
       >
         {title}
       </Text>
diff --git a/src/components/ProposalTemplates/index.tsx b/src/components/ProposalTemplates/index.tsx
index 55d55fa74b..eaec3585b3 100644
--- a/src/components/ProposalTemplates/index.tsx
+++ b/src/components/ProposalTemplates/index.tsx
@@ -42,7 +42,7 @@ export default function ProposalTemplates() {
             <Link to={DAO_ROUTES.proposalTemplateNew.relative(addressPrefix, daoAddress)}>
               <Button
                 variant="text"
-                textStyle="text-xl-mono-bold"
+                textStyle="display-xl"
               >
                 {t('emptyProposalTemplatesCreateMessage')}
               </Button>
diff --git a/src/components/Proposals/AzoriusDetails/index.tsx b/src/components/Proposals/AzoriusDetails/index.tsx
index 7c10184225..b1cc2cfb6b 100644
--- a/src/components/Proposals/AzoriusDetails/index.tsx
+++ b/src/components/Proposals/AzoriusDetails/index.tsx
@@ -1,40 +1,27 @@
 import { GridItem } from '@chakra-ui/react';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
-import { useFractal } from '../../../providers/App/AppProvider';
+import { CONTENT_MAXW } from '../../../constants/common';
 import { AzoriusProposal } from '../../../types';
-import ContentBox from '../../ui/containers/ContentBox';
 import { ProposalDetailsGrid } from '../../ui/containers/ProposalDetailsGrid';
 import { useProposalCountdown } from '../../ui/proposal/useProposalCountdown';
-import { ProposalAction } from '../ProposalActions/ProposalAction';
 import { ProposalInfo } from '../ProposalInfo';
 import ProposalSummary from '../ProposalSummary';
 import ProposalVotes from '../ProposalVotes';
-import { VoteContextProvider } from '../ProposalVotes/context/VoteContext';
 
 export function AzoriusProposalDetails({ proposal }: { proposal: AzoriusProposal }) {
-  const {
-    readOnly: { user },
-  } = useFractal();
   useProposalCountdown(proposal);
 
   return (
     <ProposalDetailsGrid>
-      <GridItem colSpan={2}>
-        <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-          <ProposalInfo proposal={proposal} />
-        </ContentBox>
+      <GridItem
+        colSpan={2}
+        gap="1.5rem"
+        maxW={CONTENT_MAXW}
+      >
+        <ProposalInfo proposal={proposal} />
         <ProposalVotes proposal={proposal} />
       </GridItem>
-      <GridItem>
+      <GridItem maxW={CONTENT_MAXW}>
         <ProposalSummary proposal={proposal} />
-        {user.address && (
-          <VoteContextProvider proposal={proposal}>
-            <ProposalAction
-              proposal={proposal}
-              expandedView
-            />
-          </VoteContextProvider>
-        )}
       </GridItem>
     </ProposalDetailsGrid>
   );
diff --git a/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx b/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx
index 7f7fe953e7..76bb7c6dad 100644
--- a/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx
+++ b/src/components/Proposals/MultisigProposalDetails/SignerDetails.tsx
@@ -1,13 +1,13 @@
-import { Box, Divider, Grid, GridItem, Text } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Text } from '@chakra-ui/react';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { MultisigProposal } from '../../../types';
 import { DEFAULT_DATE_TIME_FORMAT } from '../../../utils/numberFormats';
 import { ActivityAddress } from '../../Activity/ActivityAddress';
 import { Badge } from '../../ui/badges/Badge';
 import ContentBox from '../../ui/containers/ContentBox';
+import Divider from '../../ui/utils/Divider';
 
 function OwnerInfoRow({
   owner,
@@ -24,6 +24,8 @@ function OwnerInfoRow({
     <Grid
       templateColumns="1fr auto 1fr"
       my="0.75rem"
+      color="neutral-7"
+      alignItems="center"
     >
       <GridItem colSpan={1}>
         <ActivityAddress
@@ -41,10 +43,13 @@ function OwnerInfoRow({
       </GridItem>
       <GridItem
         colSpan={1}
-        placeSelf="end"
+        justifyContent="flex-end"
+        display="flex"
       >
         {ownerConfirmed && (
-          <Text>{format(new Date(ownerConfirmed.submissionDate), DEFAULT_DATE_TIME_FORMAT)}</Text>
+          <Text as="span">
+            {format(new Date(ownerConfirmed.submissionDate), DEFAULT_DATE_TIME_FORMAT)}
+          </Text>
         )}
       </GridItem>
     </Grid>
@@ -61,10 +66,20 @@ export function SignerDetails({ proposal }: { proposal: MultisigProposal }) {
     return null;
   }
   return (
-    <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-      <Text textStyle="text-lg-mono-medium">{t('signers')}</Text>
+    <ContentBox
+      containerBoxProps={{
+        bg: 'transparent',
+        border: '1px solid',
+        borderColor: 'neutral-3',
+        borderRadius: '0.5rem',
+      }}
+    >
+      <Text textStyle="display-lg">{t('signers')}</Text>
       <Box marginTop={4}>
-        <Divider color="chocolate.700" />
+        <Divider
+          width="calc(100% + 4rem)"
+          mx="-2rem"
+        />
         <Box marginTop={4}>
           {safe.owners.map(owner => (
             <OwnerInfoRow
diff --git a/src/components/Proposals/MultisigProposalDetails/TxDetails.tsx b/src/components/Proposals/MultisigProposalDetails/TxDetails.tsx
index 45e72c0edd..e4760997f1 100644
--- a/src/components/Proposals/MultisigProposalDetails/TxDetails.tsx
+++ b/src/components/Proposals/MultisigProposalDetails/TxDetails.tsx
@@ -1,21 +1,39 @@
-import { Box, Divider, Text } from '@chakra-ui/react';
+import { Box, Text, Flex } from '@chakra-ui/react';
 import { format } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { createAccountSubstring } from '../../../hooks/utils/useDisplayName';
 import { MultisigProposal } from '../../../types';
 import { DEFAULT_DATE_TIME_FORMAT } from '../../../utils/numberFormats';
 import ContentBox from '../../ui/containers/ContentBox';
 import InfoRow from '../../ui/proposal/InfoRow';
+import ProposalCreatedBy from '../../ui/proposal/ProposalCreatedBy';
+import Divider from '../../ui/utils/Divider';
 
 export function TxDetails({ proposal }: { proposal: MultisigProposal }) {
   const { t } = useTranslation('proposal');
   return (
-    <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-      <Text textStyle="text-lg-mono-medium">{t('proposalSummaryTitle')}</Text>
+    <ContentBox
+      containerBoxProps={{
+        bg: 'neutral-2',
+        border: '1px solid',
+        borderColor: 'neutral-3',
+        borderRadius: '0.5rem',
+        my: 0,
+      }}
+    >
+      <Text
+        textStyle="display-lg"
+        variant="darker"
+      >
+        {t('proposalSummaryTitle')}
+      </Text>
       <Box marginTop={4}>
-        <Divider color="chocolate.700" />
+        <Divider
+          variant="darker"
+          width="calc(100% + 4rem)"
+          mx="-2rem"
+        />
         <InfoRow
           property={t('proposalId')}
           value={createAccountSubstring(proposal.proposalId)}
@@ -33,6 +51,9 @@ export function TxDetails({ proposal }: { proposal: MultisigProposal }) {
           value={format(proposal.eventDate, DEFAULT_DATE_TIME_FORMAT)}
           tooltip={formatInTimeZone(proposal.eventDate, 'GMT', DEFAULT_DATE_TIME_FORMAT)}
         />
+        <Flex mt="1rem">
+          <ProposalCreatedBy proposer={proposal.confirmations[0].owner} />
+        </Flex>
         <InfoRow
           property={t('transactionHash')}
           value={proposal.transactionHash ? undefined : '-'}
diff --git a/src/components/Proposals/MultisigProposalDetails/index.tsx b/src/components/Proposals/MultisigProposalDetails/index.tsx
index 29a02ac73b..c694e103fd 100644
--- a/src/components/Proposals/MultisigProposalDetails/index.tsx
+++ b/src/components/Proposals/MultisigProposalDetails/index.tsx
@@ -1,10 +1,7 @@
-import { GridItem, Box } from '@chakra-ui/react';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
+import { GridItem } from '@chakra-ui/react';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { FractalProposal, MultisigProposal } from '../../../types';
-import ContentBox from '../../ui/containers/ContentBox';
 import { ProposalDetailsGrid } from '../../ui/containers/ProposalDetailsGrid';
-import ProposalCreatedBy from '../../ui/proposal/ProposalCreatedBy';
 import { ProposalInfo } from '../ProposalInfo';
 import { SignerDetails } from './SignerDetails';
 import { TxActions } from './TxActions';
@@ -18,12 +15,7 @@ export function MultisigProposalDetails({ proposal }: { proposal: FractalProposa
   return (
     <ProposalDetailsGrid>
       <GridItem colSpan={2}>
-        <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-          <ProposalInfo proposal={proposal} />
-          <Box mt={4}>
-            <ProposalCreatedBy proposer={txProposal.confirmations[0].owner} />
-          </Box>
-        </ContentBox>
+        <ProposalInfo proposal={proposal} />
         <SignerDetails proposal={txProposal} />
       </GridItem>
       <GridItem colSpan={1}>
diff --git a/src/components/Proposals/ProposalActions/CastVote.tsx b/src/components/Proposals/ProposalActions/CastVote.tsx
index fb0b5443f4..0753700c54 100644
--- a/src/components/Proposals/ProposalActions/CastVote.tsx
+++ b/src/components/Proposals/ProposalActions/CastVote.tsx
@@ -1,7 +1,8 @@
-import { Button, Tooltip, Box, Text, Image, Flex } from '@chakra-ui/react';
-import { CloseX, Check, SingleCheckOutline } from '@decent-org/fractal-ui';
+import { Button, Tooltip, Box, Text, Image, Flex, Radio, RadioGroup, Icon } from '@chakra-ui/react';
+import { Check, CheckCircle } from '@phosphor-icons/react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { TOOLTIP_MAXW } from '../../../constants/common';
 import useSnapshotProposal from '../../../hooks/DAO/loaders/snapshot/useSnapshotProposal';
 import useCastVote from '../../../hooks/DAO/proposal/useCastVote';
 import useCurrentBlockNumber from '../../../hooks/utils/useCurrentBlockNumber';
@@ -11,6 +12,7 @@ import {
   FractalProposalState,
   AzoriusVoteChoice,
   ExtendedSnapshotProposal,
+  VOTE_CHOICES,
 } from '../../../types';
 import WeightedInput from '../../ui/forms/WeightedInput';
 import { useVoteContext } from '../ProposalVotes/context/VoteContext';
@@ -25,6 +27,7 @@ function Vote({
   onCastSnapshotVote?: () => Promise<void>;
 }) {
   const [pending, setPending] = useState<boolean>(false);
+  const [voteChoice, setVoiceChoice] = useState<AzoriusVoteChoice>();
   const { t } = useTranslation(['common', 'proposal', 'transaction']);
   const { isLoaded: isCurrentBlockLoaded, currentBlockNumber } = useCurrentBlockNumber();
 
@@ -95,7 +98,12 @@ function Vote({
                 onClick={() => handleSelectSnapshotChoice(i)}
                 marginTop={5}
               >
-                {selectedChoice === i && <Check boxSize="1.5rem" />}
+                {selectedChoice === i && (
+                  <Icon
+                    as={Check}
+                    boxSize="1.5rem"
+                  />
+                )}
                 {choice}
               </Button>
             ))}
@@ -104,19 +112,22 @@ function Vote({
           isDisabled={voteDisabled}
           onClick={() => castSnapshotVote(onCastSnapshotVote)}
           marginTop={5}
+          padding="1.5rem 6rem"
+          height="auto"
         >
           {t('vote')}
         </Button>
         {hasVoted && (
           <Box
             mt={4}
-            color="grayscale.500"
+            color="neutral-6"
             fontWeight="600"
           >
             <Flex>
-              <SingleCheckOutline
+              <Icon
                 boxSize="1.5rem"
                 mr={2}
+                as={CheckCircle}
               />
               <Text>{t('successCastVote', { ns: 'transaction' })}</Text>
             </Flex>
@@ -125,13 +136,14 @@ function Vote({
         )}
         <Box
           mt={4}
-          color="grayscale.700"
+          color="neutral-7"
         >
           <Text>{t('poweredBy')}</Text>
           <Flex>
             <Flex mr={1}>
+              {/* TODO: replace with <SnapshotIcon /> */}
               <Image
-                src="/images/snapshot-icon.svg"
+                src="/images/snapshot-icon-fill.svg"
                 alt="Snapshot icon"
                 mr={1}
               />
@@ -155,7 +167,8 @@ function Vote({
 
   return (
     <Tooltip
-      placement="top"
+      placement="left"
+      maxW={TOOLTIP_MAXW}
       title={
         proposalStartBlockNotFinalized
           ? t('proposalStartBlockNotFinalized', { ns: 'proposal' })
@@ -164,34 +177,44 @@ function Vote({
             : undefined
       }
     >
-      <>
-        <Button
-          width="full"
-          isDisabled={disabled}
-          onClick={() => castVote(AzoriusVoteChoice.Yes)}
-          marginTop={5}
-        >
-          {t('approve')}
-          <Check fill="black" />
-        </Button>
-        <Button
-          marginTop={5}
-          width="full"
-          isDisabled={disabled}
-          onClick={() => castVote(AzoriusVoteChoice.No)}
-        >
-          {t('reject')}
-          <CloseX />
-        </Button>
+      <RadioGroup>
+        {VOTE_CHOICES.map((choice, index) => (
+          <Radio
+            key={choice}
+            onChange={event => {
+              event.preventDefault();
+              if (!disabled) {
+                setVoiceChoice(index);
+              }
+            }}
+            width="100%"
+            isChecked={index === voteChoice}
+            isDisabled={disabled}
+            bg="black-0"
+            color="lilac--3"
+            size="md"
+            _disabled={{ bg: 'neutral-6', color: 'neutral-5' }}
+            _hover={{ bg: 'black-0', color: 'lilac--4' }}
+            _checked={{
+              bg: 'black-0',
+              color: 'lilac--3',
+              borderWidth: '6px',
+            }}
+          >
+            {t(choice, { ns: 'common' })}
+          </Radio>
+        ))}
         <Button
           marginTop={5}
+          padding="1.5rem 6rem"
+          height="auto"
           width="full"
           isDisabled={disabled}
-          onClick={() => castVote(AzoriusVoteChoice.Abstain)}
+          onClick={() => voteChoice && castVote(voteChoice)}
         >
-          {t('abstain')}
+          {t('vote')}
         </Button>
-      </>
+      </RadioGroup>
     </Tooltip>
   );
 }
diff --git a/src/components/Proposals/ProposalActions/Execute.tsx b/src/components/Proposals/ProposalActions/Execute.tsx
index 72411709d5..d43b74917d 100644
--- a/src/components/Proposals/ProposalActions/Execute.tsx
+++ b/src/components/Proposals/ProposalActions/Execute.tsx
@@ -15,6 +15,8 @@ export function Execute({ proposal }: { proposal: FractalProposal }) {
       width="full"
       isDisabled={disabled}
       marginTop={5}
+      padding="1.5rem 6rem"
+      height="auto"
     >
       {t('execute', { ns: 'common' })}
     </Button>
diff --git a/src/components/Proposals/ProposalActions/ProposalAction.tsx b/src/components/Proposals/ProposalActions/ProposalAction.tsx
index 553dd97c8e..6d031cb79a 100644
--- a/src/components/Proposals/ProposalActions/ProposalAction.tsx
+++ b/src/components/Proposals/ProposalActions/ProposalAction.tsx
@@ -1,12 +1,9 @@
-import { Button, Flex, Text } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import useSnapshotProposal from '../../../hooks/DAO/loaders/snapshot/useSnapshotProposal';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { ExtendedSnapshotProposal, FractalProposal, FractalProposalState } from '../../../types';
-import ContentBox from '../../ui/containers/ContentBox';
-import { ProposalCountdown } from '../../ui/proposal/ProposalCountdown';
 import { useVoteContext } from '../ProposalVotes/context/VoteContext';
 import CastVote from './CastVote';
 import { Execute } from './Execute';
@@ -69,20 +66,6 @@ export function ProposalAction({
         proposal.state === FractalProposalState.TIMELOCKABLE ||
         proposal.state === FractalProposalState.TIMELOCKED));
 
-  const labelKey = useMemo(() => {
-    switch (proposal.state) {
-      case FractalProposalState.ACTIVE:
-        return 'vote';
-      case FractalProposalState.TIMELOCKABLE:
-        return 'timelockTitle';
-      case FractalProposalState.EXECUTABLE:
-      case FractalProposalState.TIMELOCKED:
-        return 'executeTitle';
-      default:
-        return '';
-    }
-  }, [proposal]);
-
   const label = useMemo(() => {
     if (isSnapshotProposal) {
       return t('details');
@@ -110,21 +93,11 @@ export function ProposalAction({
       return null;
 
     return (
-      <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-        <Flex justifyContent="space-between">
-          <Text textStyle="text-lg-mono-medium">
-            {t(labelKey, {
-              ns: isActiveProposal ? 'common' : 'proposal',
-            })}
-          </Text>
-          <ProposalCountdown proposal={proposal} />
-        </Flex>
-        <ProposalActions
-          proposal={proposal}
-          extendedSnapshotProposal={extendedSnapshotProposal}
-          onCastSnapshotVote={onCastSnapshotVote}
-        />
-      </ContentBox>
+      <ProposalActions
+        proposal={proposal}
+        extendedSnapshotProposal={extendedSnapshotProposal}
+        onCastSnapshotVote={onCastSnapshotVote}
+      />
     );
   }
 
diff --git a/src/components/Proposals/ProposalCard/ProposalCard.tsx b/src/components/Proposals/ProposalCard/ProposalCard.tsx
index 5a4961f994..6bd9fe3bcb 100644
--- a/src/components/Proposals/ProposalCard/ProposalCard.tsx
+++ b/src/components/Proposals/ProposalCard/ProposalCard.tsx
@@ -1,15 +1,22 @@
-import { Box, Flex, Image, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { ActivityEventType, FractalProposal, SnapshotProposal } from '../../../types';
+import {
+  ActivityEventType,
+  AzoriusProposal,
+  FractalProposal,
+  SnapshotProposal,
+} from '../../../types';
 import { DEFAULT_DATE_FORMAT } from '../../../utils';
 import { ActivityDescription } from '../../Activity/ActivityDescription';
 import { Badge } from '../../ui/badges/Badge';
 import QuorumBadge from '../../ui/badges/QuorumBadge';
+import { SnapshotIcon } from '../../ui/badges/Snapshot';
+import { ProposalCountdown } from '../../ui/proposal/ProposalCountdown';
 
 function ProposalCard({ proposal }: { proposal: FractalProposal }) {
   const {
@@ -27,6 +34,7 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
   );
 
   const isSnapshotProposal = !!(proposal as SnapshotProposal).snapshotProposalId;
+  const isAzoriusProposal = !!(proposal as AzoriusProposal).votesSummary;
 
   if (!daoAddress) {
     return null;
@@ -36,39 +44,50 @@ function ProposalCard({ proposal }: { proposal: FractalProposal }) {
     <Link to={DAO_ROUTES.proposal.relative(addressPrefix, daoAddress, proposal.proposalId)}>
       <Box
         minHeight="6.25rem"
-        bg="chocolate.900"
-        _hover={{ bg: '#0B0A09' }}
+        bg="neutral-2"
+        _hover={{ bg: 'neutral-3' }}
+        _active={{ bg: 'neutral-2', border: '1px solid', borderColor: 'neutral-3' }}
+        transitionDuration="200ms"
+        transitionProperty="all"
+        transitionTimingFunction="ease-out"
         p="1.5rem"
         borderRadius="0.5rem"
       >
         {/* Top Row */}
-        <Flex justifyContent="space-between">
+        <Flex
+          justifyContent="space-between"
+          flexWrap="wrap"
+          gap="1rem"
+        >
           <Flex
             gap={2}
             alignItems="center"
+            w={{ base: '100%', md: 'auto' }}
           >
             <Badge
               labelKey={proposal.state!}
               size="sm"
+            />
+            <ProposalCountdown
               proposal={proposal}
+              showIcon={false}
+              textColor="neutral-7"
             />
             {isSnapshotProposal && (
-              <Image
-                src="/images/snapshot-icon-fill.svg"
-                alt={t('snapshot')}
-                ml={1}
-              />
+              <Box ml={1}>
+                <SnapshotIcon />
+              </Box>
             )}
           </Flex>
-          <QuorumBadge proposal={proposal} />
+          {isAzoriusProposal && <QuorumBadge proposal={proposal as AzoriusProposal} />}
         </Flex>
         <ActivityDescription activity={proposal} />
         <Box>
           {proposal.eventDate && (
             <Text
               mt={2}
-              textStyle="text-base-sans-regular"
-              color="#838383"
+              textStyle="helper-text-base"
+              color="neutral-6"
             >
               {eventDateLabel} {format(proposal.eventDate, DEFAULT_DATE_FORMAT)}
             </Text>
diff --git a/src/components/Proposals/ProposalInfo.tsx b/src/components/Proposals/ProposalInfo.tsx
index 4241c6eb4e..ade9b6d603 100644
--- a/src/components/Proposals/ProposalInfo.tsx
+++ b/src/components/Proposals/ProposalInfo.tsx
@@ -1,16 +1,19 @@
-import { Box, Flex, Text, Image, Button, Link } from '@chakra-ui/react';
+import { Box, Flex, Button, Link } from '@chakra-ui/react';
 import { Shield } from '@decent-org/fractal-ui';
+import { ArrowUpRight } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import useSnapshotProposal from '../../hooks/DAO/loaders/snapshot/useSnapshotProposal';
 import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
 import { useFractal } from '../../providers/App/AppProvider';
 import { ExtendedSnapshotProposal, FractalProposal } from '../../types';
 import { ActivityDescription } from '../Activity/ActivityDescription';
-import Snapshot from '../ui/badges/Snapshot';
+import { Badge } from '../ui/badges/Badge';
+import { SnapshotButton } from '../ui/badges/Snapshot';
 import { ModalType } from '../ui/modals/ModalProvider';
 import { useFractalModal } from '../ui/modals/useFractalModal';
+import { ProposalCountdown } from '../ui/proposal/ProposalCountdown';
 import ProposalExecutableCode from '../ui/proposal/ProposalExecutableCode';
-import ProposalStateBox from '../ui/proposal/ProposalStateBox';
+import CeleryButtonWithIcon from '../ui/utils/CeleryButtonWithIcon';
 
 export function ProposalInfo({
   proposal,
@@ -27,18 +30,30 @@ export function ProposalInfo({
   const confirmUrl = useFractalModal(ModalType.CONFIRM_URL, { url: metaData.documentationUrl });
 
   return (
-    <Box>
+    <Box
+      borderRadius={8}
+      border="1px solid"
+      borderColor="neutral-3"
+      padding="1.5rem"
+    >
       <Flex
-        gap={4}
+        gap={2}
         alignItems="center"
       >
-        <ProposalStateBox state={proposal.state} />
+        {proposal.state && (
+          <Badge
+            size="base"
+            labelKey={proposal.state}
+          />
+        )}
+        <ProposalCountdown
+          proposal={proposal}
+          showIcon={false}
+          textColor="neutral-7"
+        />
         {isSnapshotProposal && (
           <>
-            <Snapshot
-              snapshotENS={`https://snapshot.org/#${daoSnapshotENS}/proposal/${proposal.proposalId}`}
-              mt={0}
-            />
+            <SnapshotButton snapshotENS={`${daoSnapshotENS}/proposal/${proposal.proposalId}`} />
             {(proposal as ExtendedSnapshotProposal).privacy === 'shutter' && (
               <Button
                 as={Link}
@@ -63,29 +78,15 @@ export function ProposalInfo({
         <ActivityDescription
           activity={proposal}
           showFullDescription
+          showAuthor={false}
         />
         {metaData.documentationUrl && (
-          <Text
+          <CeleryButtonWithIcon
+            iconPosition="end"
+            icon={ArrowUpRight}
             onClick={confirmUrl}
-            color="gold.500"
-            as="b"
-            cursor="pointer"
-          >
-            <Flex
-              ps="0.5rem"
-              pe="0.5rem"
-            >
-              <Image
-                src="/images/external-link.svg"
-                alt={''}
-                w="1rem"
-                h="1rem"
-                my={1}
-                mr={2}
-              />
-              {metaData.documentationUrl}
-            </Flex>
-          </Text>
+            text={metaData.documentationUrl}
+          />
         )}
         <ProposalExecutableCode proposal={proposal} />
       </Box>
diff --git a/src/components/Proposals/ProposalSummary.tsx b/src/components/Proposals/ProposalSummary.tsx
index 1c0c5f307a..3342d959b3 100644
--- a/src/components/Proposals/ProposalSummary.tsx
+++ b/src/components/Proposals/ProposalSummary.tsx
@@ -1,35 +1,35 @@
-import { Text, Box, Button, Divider, Flex, Tooltip } from '@chakra-ui/react';
-import { ArrowAngleUp } from '@decent-org/fractal-ui';
+import { Text, Box, Button, Flex, Tooltip, Icon } from '@chakra-ui/react';
+import { ArrowUpRight } from '@phosphor-icons/react';
 import { format } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
 import { useMemo, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
+import { TOOLTIP_MAXW } from '../../constants/common';
 import useSafeContracts from '../../hooks/safe/useSafeContracts';
 import useBlockTimestamp from '../../hooks/utils/useBlockTimestamp';
 import { useFractal } from '../../providers/App/AppProvider';
 import { AzoriusGovernance, AzoriusProposal, GovernanceType } from '../../types';
 import { DEFAULT_DATE_TIME_FORMAT } from '../../utils/numberFormats';
 import ContentBox from '../ui/containers/ContentBox';
-import { DisplayAddress } from '../ui/links/DisplayAddress';
 import DisplayTransaction from '../ui/links/DisplayTransaction';
-import EtherscanLinkBlock from '../ui/links/EtherscanLinkBlock';
+import EtherscanLink from '../ui/links/EtherscanLink';
 import { InfoBoxLoader } from '../ui/loaders/InfoBoxLoader';
 import InfoRow from '../ui/proposal/InfoRow';
+import ProposalCreatedBy from '../ui/proposal/ProposalCreatedBy';
+import Divider from '../ui/utils/Divider';
 import { QuorumProgressBar } from '../ui/utils/ProgressBar';
+import { ProposalAction } from './ProposalActions/ProposalAction';
+import { VoteContextProvider } from './ProposalVotes/context/VoteContext';
 
-export default function ProposalSummary({
-  proposal: {
+export default function ProposalSummary({ proposal }: { proposal: AzoriusProposal }) {
+  const {
     eventDate,
     startBlock,
     votesSummary: { yes, no, abstain },
     deadlineMs,
     proposer,
     transactionHash,
-  },
-}: {
-  proposal: AzoriusProposal;
-}) {
+  } = proposal;
   const {
     governance,
     readOnly: {
@@ -94,27 +94,30 @@ export default function ProposalSummary({
       : isERC721
         ? votingStrategy.quorumThreshold!.value
         : 1n;
+
   const reachedQuorum = isERC721
     ? totalVotesCasted - no
     : votesToken
       ? (totalVotesCasted - no) / votesTokenDecimalsDenominator
       : 0n;
+
   const totalQuorum = isERC721
-    ? strategyQuorum
+    ? Number(strategyQuorum)
     : votesToken
-      ? (votesToken.totalSupply / votesTokenDecimalsDenominator / 100n) * strategyQuorum
+      ? (Number(votesToken.totalSupply / votesTokenDecimalsDenominator) * Number(strategyQuorum)) /
+        100
       : undefined;
 
   const ShowVotingPowerButton = (
     <Button
-      pr={0}
+      px={0}
       py={0}
       height="auto"
       justifyContent="flex-end"
       alignItems="flex-start"
-      variant="link"
-      textStyle="text-base-sans-regular"
-      color="gold.500"
+      variant="text"
+      textStyle="body-base"
+      color="celery-0"
       onClick={toggleShowVotingPower}
     >
       {showVotingPower
@@ -126,10 +129,22 @@ export default function ProposalSummary({
   );
 
   return (
-    <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-      <Text textStyle="text-lg-mono-medium">{t('proposalSummaryTitle')}</Text>
+    <ContentBox
+      containerBoxProps={{
+        bg: 'neutral-2',
+        border: '1px solid',
+        borderColor: 'neutral-3',
+        borderRadius: '0.5rem',
+        my: 0,
+      }}
+    >
+      <Text textStyle="display-lg">{t('proposalSummaryTitle')}</Text>
       <Box marginTop={4}>
-        <Divider color="chocolate.700" />
+        <Divider
+          variant="darker"
+          width="calc(100% + 4rem)"
+          mx="-2rem"
+        />
         <InfoRow
           property={t('votingSystem')}
           value={t('singleSnapshotVotingSystem')}
@@ -144,45 +159,53 @@ export default function ProposalSummary({
           value={format(deadlineMs, DEFAULT_DATE_TIME_FORMAT)}
           tooltip={formatInTimeZone(deadlineMs, 'GMT', DEFAULT_DATE_TIME_FORMAT)}
         />
+        <ProposalCreatedBy proposer={proposer} />
         <Flex
           marginTop={4}
-          justifyContent="space-between"
-        >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('proposedBy')}
-          </Text>
-          <DisplayAddress address={proposer} />
-        </Flex>
-        <Flex
-          marginTop={4}
-          justifyContent="space-between"
+          flexWrap="wrap"
+          alignItems="center"
         >
           <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
+            textStyle="body-base"
+            color="neutral-7"
+            w="full"
           >
             {t('snapshotTaken')}
           </Text>
-          <EtherscanLinkBlock blockNumber={startBlock.toString()}>
-            {format(eventDate, DEFAULT_DATE_TIME_FORMAT)} <ArrowAngleUp />
-          </EtherscanLinkBlock>
+          <EtherscanLink
+            type="block"
+            value={startBlock.toString()}
+            pl={0}
+          >
+            <Flex
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              {format(eventDate, DEFAULT_DATE_TIME_FORMAT)} <Icon as={ArrowUpRight} />
+            </Flex>
+          </EtherscanLink>
         </Flex>
         <Flex
           marginTop={4}
           marginBottom={transactionHash ? 0 : 4}
-          justifyContent="space-between"
+          flexWrap="wrap"
+          alignItems="center"
         >
           <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
+            textStyle="body-base"
+            color="neutral-7"
+            w="full"
           >
             {t('votingPower')}
           </Text>
           {showVotingPower ? (
-            <Tooltip label={t('votingPowerTooltip')}>{ShowVotingPowerButton}</Tooltip>
+            <Tooltip
+              label={t('votingPowerTooltip')}
+              placement="left"
+              maxW={TOOLTIP_MAXW}
+            >
+              {ShowVotingPowerButton}
+            </Tooltip>
           ) : (
             ShowVotingPowerButton
           )}
@@ -191,18 +214,25 @@ export default function ProposalSummary({
           <Flex
             marginTop={4}
             marginBottom={4}
-            justifyContent="space-between"
+            alignItems="center"
+            flexWrap="wrap"
           >
             <Text
-              textStyle="text-base-sans-regular"
-              color="chocolate.200"
+              textStyle="body-base"
+              color="neutral-7"
+              w="full"
             >
               {t('transactionHash')}
             </Text>
             <DisplayTransaction txHash={transactionHash} />
           </Flex>
         )}
-        <Divider color="chocolate.700" />
+        <Divider
+          my="0.5rem"
+          variant="darker"
+          width="calc(100% + 4rem)"
+          mx="-2rem"
+        />
       </Box>
       <Box marginTop={4}>
         <QuorumProgressBar
@@ -221,11 +251,27 @@ export default function ProposalSummary({
                   : undefined,
             },
           )}
-          reachedQuorum={reachedQuorum}
+          reachedQuorum={Number(reachedQuorum)}
           totalQuorum={totalQuorum}
           unit={isERC20 ? '%' : ''}
         />
       </Box>
+      {address && (
+        <>
+          <Divider
+            my="1.5rem"
+            variant="darker"
+            width="calc(100% + 4rem)"
+            mx="-2rem"
+          />
+          <VoteContextProvider proposal={proposal}>
+            <ProposalAction
+              proposal={proposal}
+              expandedView
+            />
+          </VoteContextProvider>
+        </>
+      )}
     </ContentBox>
   );
 }
diff --git a/src/components/Proposals/ProposalVotes/ProposalERC20VoteItem.tsx b/src/components/Proposals/ProposalVotes/ProposalERC20VoteItem.tsx
index 17c354c5e6..ffdbf8e573 100644
--- a/src/components/Proposals/ProposalVotes/ProposalERC20VoteItem.tsx
+++ b/src/components/Proposals/ProposalVotes/ProposalERC20VoteItem.tsx
@@ -1,10 +1,11 @@
-import { Grid, GridItem, Text } from '@chakra-ui/react';
+import { Grid, GridItem, Hide, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { ProposalVote } from '../../../types';
 import { formatPercentage, formatCoin } from '../../../utils';
 import StatusBox from '../../ui/badges/StatusBox';
+import Divider from '../../ui/utils/Divider';
 
 export default function ProposalERC20VoteItem({
   vote,
@@ -24,30 +25,51 @@ export default function ProposalERC20VoteItem({
   } = useFractal();
   return (
     <Grid
-      templateColumns="repeat(4, 1fr)"
+      templateColumns={{ base: 'repeat(1, 1fr)', lg: 'repeat(4, 1fr)' }}
+      gap={{ base: '0.25rem', lg: 0 }}
       width="100%"
     >
       <GridItem colSpan={1}>
-        <Text textStyle="text-base-sans-regular">
+        <Text
+          textStyle="body-base"
+          color="neutral-7"
+        >
           {displayName}
           {user.address === vote.voter && t('isMeSuffix')}
         </Text>
       </GridItem>
       <GridItem colSpan={1}>
         <StatusBox>
-          <Text textStyle="text-sm-mono-semibold">{t(vote.choice)}</Text>
+          <Text
+            textStyle="body-base"
+            color="neutral-7"
+          >
+            {t(vote.choice)}
+          </Text>
         </StatusBox>
       </GridItem>
       <GridItem colSpan={1}>
-        <Text textStyle="text-base-sans-regular">
+        <Text
+          textStyle="body-base"
+          color="neutral-7"
+        >
           {formatPercentage(vote.weight, govTokenTotalSupply)}
         </Text>
       </GridItem>
       <GridItem colSpan={1}>
-        <Text textStyle="text-base-sans-regular">
+        <Text
+          textStyle="body-base"
+          color="neutral-7"
+        >
           {formatCoin(vote.weight, true, govTokenDecimals, govTokenSymbol)}
         </Text>
       </GridItem>
+      <Hide above="lg">
+        <Divider
+          variant="darker"
+          my="0.5rem"
+        />
+      </Hide>
     </Grid>
   );
 }
diff --git a/src/components/Proposals/ProposalVotes/ProposalERC721VoteItem.tsx b/src/components/Proposals/ProposalVotes/ProposalERC721VoteItem.tsx
index 063e2c6716..07e48c0152 100644
--- a/src/components/Proposals/ProposalVotes/ProposalERC721VoteItem.tsx
+++ b/src/components/Proposals/ProposalVotes/ProposalERC721VoteItem.tsx
@@ -1,9 +1,10 @@
-import { Grid, GridItem, Text } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Hide } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { AzoriusGovernance, ERC721ProposalVote } from '../../../types';
 import StatusBox from '../../ui/badges/StatusBox';
+import Divider from '../../ui/utils/Divider';
 
 export default function ProposalERC721VoteItem({
   vote: { voter, choice, tokenAddresses },
@@ -34,14 +35,14 @@ export default function ProposalERC721VoteItem({
       width="100%"
     >
       <GridItem colSpan={1}>
-        <Text textStyle="text-base-sans-regular">
+        <Text>
           {displayName}
           {user.address === voter && t('isMeSuffix')}
         </Text>
       </GridItem>
       <GridItem colSpan={1}>
         <StatusBox>
-          <Text textStyle="text-sm-mono-semibold">{t(choice)}</Text>
+          <Text>{t(choice)}</Text>
         </StatusBox>
       </GridItem>
       {votedTokens && (
@@ -54,6 +55,12 @@ export default function ProposalERC721VoteItem({
           </Text>
         </GridItem>
       )}
+      <Hide above="lg">
+        <Divider
+          variant="darker"
+          my="0.5rem"
+        />
+      </Hide>
     </Grid>
   );
 }
diff --git a/src/components/Proposals/ProposalVotes/context/VoteContext.tsx b/src/components/Proposals/ProposalVotes/context/VoteContext.tsx
index 443b95e08c..759500ef05 100644
--- a/src/components/Proposals/ProposalVotes/context/VoteContext.tsx
+++ b/src/components/Proposals/ProposalVotes/context/VoteContext.tsx
@@ -109,7 +109,7 @@ export function VoteContextProvider({
             ).toBigInt() > 0n && !hasVoted;
         } else if (type === GovernanceType.AZORIUS_ERC721) {
           if (refetchUserTokens) {
-            await getUserERC721VotingTokens();
+            await getUserERC721VotingTokens(null);
           }
           newCanVote = user.votingWeight > 0 && remainingTokenIds.length > 0;
         } else if (type === GovernanceType.MULTISIG) {
diff --git a/src/components/Proposals/ProposalVotes/index.tsx b/src/components/Proposals/ProposalVotes/index.tsx
index 6046b9cf8d..8a61ab0c02 100644
--- a/src/components/Proposals/ProposalVotes/index.tsx
+++ b/src/components/Proposals/ProposalVotes/index.tsx
@@ -1,16 +1,6 @@
-import {
-  Box,
-  CircularProgress,
-  CircularProgressLabel,
-  Divider,
-  Flex,
-  Grid,
-  GridItem,
-  Text,
-} from '@chakra-ui/react';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { useFractal } from '../../../providers/App/AppProvider';
 import {
   AzoriusGovernance,
@@ -20,38 +10,21 @@ import {
 } from '../../../types';
 import ContentBox from '../../ui/containers/ContentBox';
 import { InfoBoxLoader } from '../../ui/loaders/InfoBoxLoader';
+import Divider from '../../ui/utils/Divider';
 import ProgressBar from '../../ui/utils/ProgressBar';
 import ProposalERC20VoteItem from './ProposalERC20VoteItem';
 import ProposalERC721VoteItem from './ProposalERC721VoteItem';
 
-export function VotesPercentage({
-  label,
-  percentage,
-  children,
-}: {
-  label: string;
-  percentage: number;
-  children?: ReactNode;
-}) {
+export function VotesPercentage({ label, percentage }: { label: string; percentage: number }) {
   return (
     <Flex
       flexWrap="wrap"
       marginTop={2}
     >
-      <ProgressBar value={percentage}>
-        <Flex
-          justifyContent="space-between"
-          width="100%"
-        >
-          <Text
-            marginTop={2}
-            marginBottom={2}
-          >
-            {label}
-          </Text>
-          {children}
-        </Flex>
-      </ProgressBar>
+      <ProgressBar
+        value={percentage}
+        label={label}
+      />
     </Flex>
   );
 }
@@ -103,45 +76,17 @@ function ProposalVotes({
   const abstainVotesPercentage = getVotesPercentage(abstain);
 
   return (
-    <>
-      <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-        <Text textStyle="text-lg-mono-medium">{t('breakdownTitle', { ns: 'proposal' })}</Text>
-        <Grid
-          templateColumns={{ base: 'repeat(2, 1ft)', md: 'repeat(5, 1fr)' }}
-          gap={7}
-        >
-          <GridItem
-            colSpan={{ base: 4, md: 1 }}
-            justifyContent="center"
-            mx="auto"
-          >
-            <CircularProgress
-              color="drab.900"
-              trackColor="drab.700"
-              value={Math.min(yesVotesPercentage, 100)}
-              size="156px"
-              marginTop={4}
-            >
-              <CircularProgressLabel>
-                <Text
-                  textStyle="text-lg-mono-regular"
-                  color="grayscale.100"
-                >
-                  {Math.min(yesVotesPercentage, 100)}%
-                </Text>
-                <Text
-                  textStyle="text-lg-mono-regular"
-                  color="grayscale.100"
-                >
-                  {t('yes')}
-                </Text>
-              </CircularProgressLabel>
-            </CircularProgress>
-          </GridItem>
-          <GridItem
-            colSpan={4}
-            rowGap={4}
-          >
+    <Flex
+      border="1px solid"
+      borderColor="neutral-3"
+      borderRadius="0.5rem"
+      flexWrap="wrap"
+      mt="1.5rem"
+    >
+      <ContentBox containerBoxProps={{ bg: 'transparent', width: '100%', my: 0 }}>
+        <Text textStyle="display-lg">{t('breakdownTitle', { ns: 'proposal' })}</Text>
+        <Grid>
+          <GridItem rowGap={4}>
             <VotesPercentage
               label={t('yes')}
               percentage={yesVotesPercentage}
@@ -159,12 +104,13 @@ function ProposalVotes({
         </Grid>
       </ContentBox>
       {votes.length !== 0 && (
-        <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-          <Text textStyle="text-lg-mono-medium">{t('votesTitle', { ns: 'proposal' })}</Text>
+        <ContentBox containerBoxProps={{ bg: 'transparent', width: '100%', my: 0, paddingTop: 0 }}>
+          <Text textStyle="display-lg">{t('votesTitle', { ns: 'proposal' })}</Text>
           <Divider
-            color="chocolate.700"
-            marginTop={4}
-            marginBottom={4}
+            my={4}
+            variant="darker"
+            width="calc(100% + 4rem)"
+            mx="-2rem"
           />
           <Flex
             flexWrap="wrap"
@@ -196,7 +142,7 @@ function ProposalVotes({
           </Flex>
         </ContentBox>
       )}
-    </>
+    </Flex>
   );
 }
 
diff --git a/src/components/Proposals/ProposalsList.tsx b/src/components/Proposals/ProposalsList.tsx
index b90426c48a..a6e6f8b56c 100644
--- a/src/components/Proposals/ProposalsList.tsx
+++ b/src/components/Proposals/ProposalsList.tsx
@@ -1,6 +1,7 @@
 import { Button, Box, Flex } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { CONTENT_MAXW } from '../../constants/common';
 import { DAO_ROUTES } from '../../constants/routes';
 import { useCanUserCreateProposal } from '../../hooks/utils/useCanUserSubmitProposal';
 import { useFractal } from '../../providers/App/AppProvider';
@@ -22,6 +23,7 @@ export function ProposalsList({ proposals }: { proposals: FractalProposal[] }) {
     <Flex
       flexDirection="column"
       gap="1rem"
+      maxW={CONTENT_MAXW}
     >
       {proposals === undefined ? (
         <Box mt={7}>
diff --git a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalSummary.tsx b/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalSummary.tsx
index 0d136e9b82..b3a438835c 100644
--- a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalSummary.tsx
+++ b/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalSummary.tsx
@@ -1,15 +1,16 @@
-import { Text, Box, Button, Divider, Flex, Tooltip } from '@chakra-ui/react';
+import { Text, Box, Button, Flex, Tooltip } from '@chakra-ui/react';
 import { format } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
+import { TOOLTIP_MAXW } from '../../../constants/common';
 import { ExtendedSnapshotProposal } from '../../../types';
 import { DEFAULT_DATE_TIME_FORMAT } from '../../../utils/numberFormats';
 import ContentBox from '../../ui/containers/ContentBox';
 import ExternalLink from '../../ui/links/ExternalLink';
 import { InfoBoxLoader } from '../../ui/loaders/InfoBoxLoader';
 import InfoRow from '../../ui/proposal/InfoRow';
+import Divider from '../../ui/utils/Divider';
 import { QuorumProgressBar } from '../../ui/utils/ProgressBar';
 import useSnapshotUserVotingWeight from './hooks/useSnapshotUserVotingWeight';
 import useTotalVotes from './hooks/useTotalVotes';
@@ -54,9 +55,9 @@ export default function SnapshotProposalSummary({ proposal }: ISnapshotProposalS
       height="auto"
       justifyContent="flex-end"
       alignItems="flex-start"
-      variant="link"
-      textStyle="text-base-sans-regular"
-      color="gold.500"
+      variant="text"
+      textStyle="body-base"
+      color="celery-0"
       onClick={toggleShowVotingPower}
     >
       {showVotingPower ? votingWeight : t('show')}
@@ -64,10 +65,18 @@ export default function SnapshotProposalSummary({ proposal }: ISnapshotProposalS
   );
 
   return (
-    <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-      <Text textStyle="text-lg-mono-medium">{t('proposalSummaryTitle')}</Text>
+    <ContentBox
+      containerBoxProps={{
+        bg: 'neutral-2',
+        border: '1px solid',
+        borderColor: 'neutral-3',
+        borderRadius: '0.5rem',
+        my: 0,
+      }}
+    >
+      <Text textStyle="display-lg">{t('proposalSummaryTitle')}</Text>
       <Box marginTop={4}>
-        <Divider color="chocolate.700" />
+        <Divider variant="darker" />
         <InfoRow
           property={t('votingSystem')}
           value={t(getVotingSystemTitle())}
@@ -77,8 +86,8 @@ export default function SnapshotProposalSummary({ proposal }: ISnapshotProposalS
           justifyContent="space-between"
         >
           <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
+            textStyle="body-base"
+            color="neutral-7"
           >
             {t('ipfs')}
           </Text>
@@ -102,26 +111,32 @@ export default function SnapshotProposalSummary({ proposal }: ISnapshotProposalS
           justifyContent="space-between"
         >
           <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
+            textStyle="body-base"
+            color="neutral-7"
           >
             {t('votingPower')}
           </Text>
           {showVotingPower ? (
-            <Tooltip label={t('votingPowerTooltip')}>{ShowVotingPowerButton}</Tooltip>
+            <Tooltip
+              label={t('votingPowerTooltip')}
+              placement="left"
+              maxW={TOOLTIP_MAXW}
+            >
+              {ShowVotingPowerButton}
+            </Tooltip>
           ) : (
             ShowVotingPowerButton
           )}
         </Flex>
         <Divider
-          color="chocolate.700"
           marginTop={4}
+          variant="darker"
         />
         {!!proposal.quorum && (
           <Box marginTop={4}>
             <QuorumProgressBar
-              reachedQuorum={BigInt(totalVotesCasted)}
-              totalQuorum={proposal.quorum ? BigInt(proposal.quorum) : undefined}
+              reachedQuorum={totalVotesCasted}
+              totalQuorum={proposal.quorum}
               unit=""
             />
           </Box>
diff --git a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVoteItem.tsx b/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVoteItem.tsx
index 24b81128c8..377ebabcf5 100644
--- a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVoteItem.tsx
+++ b/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVoteItem.tsx
@@ -29,7 +29,10 @@ export default function SnapshotProposalVoteItem({ proposal, vote }: ISnapshotPr
       width="100%"
     >
       <GridItem colSpan={1}>
-        <Text textStyle="text-base-sans-regular">
+        <Text
+          textStyle="body-base"
+          color="neutral-7"
+        >
           {displayName}
           {user.address === vote.voter && t('isMeSuffix')}
         </Text>
@@ -46,7 +49,10 @@ export default function SnapshotProposalVoteItem({ proposal, vote }: ISnapshotPr
               }
               return (
                 <StatusBox key={choiceIdx}>
-                  <Text textStyle="text-sm-mono-semibold">
+                  <Text
+                    textStyle="body-base"
+                    color="neutral-7"
+                  >
                     {proposal.choices[(choiceIdx as number) - 1]}
                   </Text>
                 </StatusBox>
@@ -55,14 +61,20 @@ export default function SnapshotProposalVoteItem({ proposal, vote }: ISnapshotPr
           </Flex>
         ) : (
           <StatusBox>
-            <Text textStyle="text-sm-mono-semibold">
+            <Text
+              textStyle="body-base"
+              color="neutral-7"
+            >
               {proposal.choices[(vote.choice as number) - 1]}
             </Text>
           </StatusBox>
         )}
       </GridItem>
       <GridItem colSpan={1}>
-        <Text textStyle="text-base-sans-regular">
+        <Text
+          textStyle="body-base"
+          color="neutral-7"
+        >
           {vote.votingWeight} {proposal.strategies[0].params.symbol}
         </Text>
       </GridItem>
diff --git a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVotes.tsx b/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVotes.tsx
index 003e659167..0ba724ccdd 100644
--- a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVotes.tsx
+++ b/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalVotes.tsx
@@ -1,9 +1,9 @@
-import { Divider, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
+import { Flex, Grid, GridItem, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import { ExtendedSnapshotProposal, FractalProposalState } from '../../../types';
 import ContentBox from '../../ui/containers/ContentBox';
 import { ProposalCountdown } from '../../ui/proposal/ProposalCountdown';
+import Divider from '../../ui/utils/Divider';
 import { VotesPercentage } from '../ProposalVotes';
 import SnapshotProposalVoteItem from './SnapshotProposalVoteItem';
 import useTotalVotes from './hooks/useTotalVotes';
@@ -20,19 +20,26 @@ export default function SnapshotProposalVotes({ proposal }: ISnapshotProposalVot
 
   return (
     <>
-      <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
+      <ContentBox
+        containerBoxProps={{
+          bg: 'transparent',
+          border: '1px solid',
+          borderColor: 'neutral-3',
+          borderRadius: '0.5rem',
+        }}
+      >
         <Flex justifyContent="space-between">
-          <Text textStyle="text-lg-mono-medium">{t('breakdownTitle')}</Text>
+          <Text textStyle="display-lg">{t('breakdownTitle')}</Text>
           <Flex>
             <Text
-              color="chocolate.200"
-              textStyle="text-md-mono-semibold"
+              color="white-0"
+              textStyle="display-lg"
             >
               {t('totalVotes')}
             </Text>
             <Text
               ml={1}
-              textStyle="text-md-mono-semibold"
+              textStyle="display-lg"
             >
               {totalVotesCasted} {strategySymbol}
             </Text>
@@ -58,29 +65,18 @@ export default function SnapshotProposalVotes({ proposal }: ISnapshotProposalVot
                   key={choice}
                   label={choice}
                   percentage={Number(choicePercentageFromTotal.toFixed(1))}
-                >
-                  <Text>
-                    {proposal.privacy === 'shutter' &&
-                    proposal.state !== FractalProposalState.CLOSED
-                      ? `? ${strategySymbol}`
-                      : `${votesBreakdownChoiceTotal.toFixed(2)} ${strategySymbol}`}
-                  </Text>
-                </VotesPercentage>
+                />
               );
             })}
           </GridItem>
         </Grid>
       </ContentBox>
       {votes && votes.length !== 0 && (
-        <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-          <Text textStyle="text-lg-mono-medium">
+        <ContentBox containerBoxProps={{ bg: 'transparent' }}>
+          <Text textStyle="display-lg">
             {t('votesTitle')} ({votes.length})
           </Text>
-          <Divider
-            color="chocolate.700"
-            marginTop={4}
-            marginBottom={4}
-          />
+          <Divider my={4} />
           <Flex
             flexWrap="wrap"
             gap={4}
@@ -91,8 +87,8 @@ export default function SnapshotProposalVotes({ proposal }: ISnapshotProposalVot
                 width="100%"
               >
                 <Text
-                  color="chocolate.200"
-                  textStyle="text-base-mono-semibold"
+                  color="neutral-7"
+                  textStyle="body-base"
                 >
                   {t('shutterVotesHidden')} |
                 </Text>
diff --git a/src/components/Proposals/SnapshotProposalDetails/index.tsx b/src/components/Proposals/SnapshotProposalDetails/index.tsx
index 8b22d21c7c..943a86690d 100644
--- a/src/components/Proposals/SnapshotProposalDetails/index.tsx
+++ b/src/components/Proposals/SnapshotProposalDetails/index.tsx
@@ -1,10 +1,8 @@
 import { GridItem } from '@chakra-ui/react';
 import { useEffect } from 'react';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 import useSnapshotProposal from '../../../hooks/DAO/loaders/snapshot/useSnapshotProposal';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { SnapshotProposal } from '../../../types';
-import ContentBox from '../../ui/containers/ContentBox';
 import { ProposalDetailsGrid } from '../../ui/containers/ProposalDetailsGrid';
 import { useProposalCountdown } from '../../ui/proposal/useProposalCountdown';
 import { ProposalAction } from '../ProposalActions/ProposalAction';
@@ -32,9 +30,7 @@ export default function SnapshotProposalDetails({ proposal }: ISnapshotProposalD
   return (
     <ProposalDetailsGrid>
       <GridItem colSpan={2}>
-        <ContentBox containerBoxProps={{ bg: BACKGROUND_SEMI_TRANSPARENT }}>
-          <ProposalInfo proposal={extendedSnapshotProposal || proposal} />
-        </ContentBox>
+        <ProposalInfo proposal={extendedSnapshotProposal || proposal} />
         {!!extendedSnapshotProposal && (
           <SnapshotProposalVotes proposal={extendedSnapshotProposal} />
         )}
diff --git a/src/components/Proposals/index.tsx b/src/components/Proposals/index.tsx
index d1c53e3f38..2102f6d74a 100644
--- a/src/components/Proposals/index.tsx
+++ b/src/components/Proposals/index.tsx
@@ -1,5 +1,5 @@
-import { Box, Divider, Flex, Text, Button } from '@chakra-ui/react';
-import { ArrowDown } from '@decent-org/fractal-ui';
+import { Box, Flex, Button, Icon } from '@chakra-ui/react';
+import { Funnel, CaretDown } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useProposals from '../../hooks/DAO/proposal/useProposals';
@@ -108,14 +108,18 @@ export default function Proposals() {
   return (
     <>
       <Flex
-        gap={6}
+        gap={3}
         mb="1.5rem"
       >
         <OptionMenu
           trigger={
-            <Box>
-              {filterTitle} <ArrowDown boxSize="1.5rem" />
-            </Box>
+            <Flex
+              alignItems="center"
+              justifyContent="space-between"
+              gap="0.25rem"
+            >
+              <Icon as={Funnel} /> {filterTitle} <Icon as={CaretDown} />
+            </Flex>
           }
           options={options}
           namespace="proposal"
@@ -123,6 +127,10 @@ export default function Proposals() {
           buttonAs={Button}
           buttonProps={{
             variant: 'tertiary',
+            paddingLeft: '0.5rem',
+            paddingRight: '0.5rem',
+            paddingTop: '0.25rem',
+            paddingBottom: '0.25rem',
             disabled: !proposals,
           }}
           closeOnSelect={false}
@@ -130,32 +138,31 @@ export default function Proposals() {
           showOptionCount
         >
           <Box>
-            <Flex justifyContent="space-between">
+            <Flex
+              px="0.5rem"
+              justifyContent="space-between"
+              gap="1.5rem"
+            >
               <Button
-                variant="text"
-                paddingLeft={0}
-                paddingRight={0}
-                justifyContent="flex-start"
+                variant="tertiary"
+                size="sm"
+                mt="0.5rem"
                 onClick={() => setFilters(allOptions)}
               >
-                <Text color="grayscale.100">{t('selectAll', { ns: 'common' })}</Text>
+                {t('selectAll', { ns: 'common' })}
               </Button>
               <Button
-                variant="text"
-                paddingLeft={0}
-                paddingRight={0}
-                justifyContent="flex-end"
+                variant="tertiary"
+                size="sm"
+                mt="0.5rem"
                 onClick={() => setFilters([])}
               >
-                <Text color="grayscale.100">{t('clear', { ns: 'common' })}</Text>
+                {t('clear', { ns: 'common' })}
               </Button>
             </Flex>
-            <Divider
-              color="chocolate.700"
-              my={4}
-            />
           </Box>
         </OptionMenu>
+
         <Sort
           sortBy={sortBy}
           setSortBy={setSortBy}
diff --git a/src/components/pages/AppHome/AppFooter.tsx b/src/components/pages/AppHome/AppFooter.tsx
deleted file mode 100644
index 8ec01944e8..0000000000
--- a/src/components/pages/AppHome/AppFooter.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Box, BoxProps, Divider, Flex, Link, Spacer, Text } from '@chakra-ui/react';
-import { Trans, useTranslation } from 'react-i18next';
-import { URL_DECENT } from '../../../constants/url';
-import ExternalLink from '../../ui/links/ExternalLink';
-
-export function AppFooter({ ...rest }: BoxProps) {
-  const { t } = useTranslation('home');
-  return (
-    <Box
-      w="100%"
-      {...rest}
-    >
-      <Divider
-        paddingTop="2.5rem"
-        color="chocolate.400"
-      />
-      <Flex paddingTop="2rem">
-        <Text
-          color="grayscale.500"
-          textStyle="text-sm-mono-bold"
-        >
-          <Trans
-            t={t}
-            i18nKey="homeAttribution"
-          >
-            Made with 💜 by
-            <Link
-              target="_blank"
-              rel="noreferrer"
-              textDecoration="underline"
-              href={URL_DECENT}
-            >
-              Decent DAO
-            </Link>
-          </Trans>
-        </Text>
-        <Spacer />
-        <ExternalLink
-          href="/docs/fractal_audit.pdf"
-          textStyle="text-sm-mono-bold"
-        >
-          {t('audit')}
-        </ExternalLink>
-        <Text
-          color="grayscale.100"
-          textStyle="text-sm-mono-bold"
-          paddingStart="1rem"
-          paddingEnd="1rem"
-        >
-          |
-        </Text>
-        <ExternalLink
-          href={`https://github.com/decent-dao/fractal-interface/releases/tag/v${import.meta.env.PACKAGE_VERSION}`}
-          textStyle="text-sm-mono-bold"
-        >
-          v{import.meta.env.PACKAGE_VERSION}
-        </ExternalLink>
-      </Flex>
-    </Box>
-  );
-}
diff --git a/src/components/pages/AppHome/CTABox.tsx b/src/components/pages/AppHome/CTABox.tsx
deleted file mode 100644
index ffc98f5849..0000000000
--- a/src/components/pages/AppHome/CTABox.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { BoxProps, Center, Flex } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-import { StyledBox } from '../../ui/containers/StyledBox';
-
-interface Props extends BoxProps {
-  leftSlot: ReactNode;
-  rightSlot: ReactNode;
-}
-
-export function CTABox({ leftSlot, rightSlot, ...rest }: Props) {
-  return (
-    <StyledBox
-      w="100%"
-      {...rest}
-    >
-      <Center>
-        <Flex
-          padding="0.5rem"
-          alignItems="center"
-          flexWrap="wrap"
-          gap="2rem"
-        >
-          {leftSlot}
-          {rightSlot}
-        </Flex>
-      </Center>
-    </StyledBox>
-  );
-}
diff --git a/src/components/pages/AppHome/FeaturedDAOCard.tsx b/src/components/pages/AppHome/FeaturedDAOCard.tsx
deleted file mode 100644
index 688311a77c..0000000000
--- a/src/components/pages/AppHome/FeaturedDAOCard.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Text, BoxProps, Image, HStack, Spacer, Flex, Box, Link } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import { Link as RouterLink } from 'react-router-dom';
-import { DAO_ROUTES } from '../../../constants/routes';
-import { StyledBox } from '../../ui/containers/StyledBox';
-interface DAOFeatureProps extends BoxProps {
-  iconSrc: string;
-  title: string;
-  desc: string;
-  network: string;
-  address: string;
-}
-
-export default function FeaturedDAOCard({
-  iconSrc,
-  title,
-  desc,
-  network,
-  address,
-  ...rest
-}: DAOFeatureProps) {
-  const { t } = useTranslation('home');
-  return (
-    <Box {...rest}>
-      <StyledBox
-        height="full"
-        display="flex"
-        flexDirection="column"
-        justifyContent="space-between"
-      >
-        <Box>
-          <HStack paddingBottom="1rem">
-            <Image
-              width="1.5rem"
-              height="1.5rem"
-              src={iconSrc}
-              alt={title}
-            />
-            <Text
-              color="grayscale.100"
-              textStyle="text-lg-mono-bold"
-              paddingStart="1.25rem"
-            >
-              {title}
-            </Text>
-          </HStack>
-          <Text
-            marginBottom="0.5rem"
-            color="grayscale.500"
-          >
-            {desc}
-          </Text>
-        </Box>
-        <Flex>
-          <Spacer />
-          <Link
-            as={RouterLink}
-            color="gold.500"
-            _hover={{ color: 'gold.500-hover' }}
-            alignSelf="end"
-            textStyle="text-lg-mono-bold"
-            to={DAO_ROUTES.dao.relative(network, address)}
-          >
-            {t('featureLink')}
-          </Link>
-        </Flex>
-      </StyledBox>
-    </Box>
-  );
-}
diff --git a/src/components/pages/AppHome/ValueProposition.tsx b/src/components/pages/AppHome/ValueProposition.tsx
deleted file mode 100644
index 49573a6c86..0000000000
--- a/src/components/pages/AppHome/ValueProposition.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Text, Image, Flex, FlexProps, VStack } from '@chakra-ui/react';
-
-interface DAOActionProps extends FlexProps {
-  iconSrc: string;
-  title: string;
-  desc: string;
-}
-
-export default function ValueProposition({ iconSrc, title, desc, ...rest }: DAOActionProps) {
-  return (
-    <Flex {...rest}>
-      <Image
-        alignSelf="center"
-        width="4.5rem"
-        height="4.5rem"
-        src={iconSrc}
-        alt={title}
-      />
-      <VStack
-        alignItems="start"
-        paddingStart="1rem"
-      >
-        <Text
-          color="grayscale.100"
-          textStyle="text-lg-mono-bold"
-        >
-          {title}
-        </Text>
-        <Text color="grayscale.500">{desc}</Text>
-      </VStack>
-    </Flex>
-  );
-}
diff --git a/src/components/pages/DAOTreasury/components/Assets.tsx b/src/components/pages/DAOTreasury/components/Assets.tsx
index 3a6bd5a19c..cbc824af25 100644
--- a/src/components/pages/DAOTreasury/components/Assets.tsx
+++ b/src/components/pages/DAOTreasury/components/Assets.tsx
@@ -1,5 +1,20 @@
-import { Box, Button, Divider, HStack, Image, Text, Tooltip } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Button,
+  HStack,
+  Image,
+  Text,
+  Tooltip,
+  Show,
+  Hide,
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+} from '@chakra-ui/react';
 import { getWithdrawalQueueContract } from '@lido-sdk/contracts';
+import { CaretDown, CaretRight } from '@phosphor-icons/react';
 import { SafeCollectibleResponse } from '@safe-global/safe-service-client';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,42 +25,44 @@ import useSignerOrProvider from '../../../../hooks/utils/useSignerOrProvider';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { formatPercentage, formatUSD } from '../../../../utils/numberFormats';
-import EtherscanLinkAddress from '../../../ui/links/EtherscanLinkAddress';
-import EtherscanLinkERC20 from '../../../ui/links/EtherscanLinkERC20';
-import EtherscanLinkERC721 from '../../../ui/links/EtherscanLinkERC721';
+import EtherscanLink from '../../../ui/links/EtherscanLink';
 import { ModalType } from '../../../ui/modals/ModalProvider';
 import { useFractalModal } from '../../../ui/modals/useFractalModal';
+import Divider from '../../../ui/utils/Divider';
 import { TokenDisplayData, useFormatCoins } from '../hooks/useFormatCoins';
 
 function CoinHeader() {
   const { t } = useTranslation('treasury');
   return (
-    <Box>
-      <Divider
-        color="chocolate.700"
-        marginTop="1.5rem"
-        marginBottom="1.5rem"
-      />
-      <HStack marginBottom="0.5rem">
+    <Box
+      mb="1rem"
+      minW="595px"
+    >
+      <Show above="lg">
+        <Divider
+          my="1rem"
+          variant="darker"
+        />
+      </Show>
+      <HStack px={{ base: '1rem', lg: '1.5rem' }}>
         <Text
-          w="33%"
-          textStyle="text-sm-sans-regular"
-          color="chocolate.200"
+          w="25%"
+          textStyle="label-small"
+          color="neutral-7"
         >
           {t('columnCoins')}
         </Text>
         <Text
-          w="33%"
-          textStyle="text-sm-sans-regular"
-          color="chocolate.200"
+          w="30%"
+          textStyle="label-small"
+          color="neutral-7"
         >
           {t('columnValue')}
         </Text>
         <Text
-          w="33%"
-          align="end"
-          textStyle="text-sm-sans-regular"
-          color="chocolate.200"
+          w="45%"
+          textStyle="label-small"
+          color="neutral-7"
         >
           {t('columnAllocation')}
         </Text>
@@ -64,51 +81,45 @@ function CoinRow({
   asset: TokenDisplayData;
 }) {
   return (
-    <HStack
-      align="top"
-      marginBottom="0.75rem"
+    <Flex
+      my="0.5rem"
+      justifyContent="space-between"
+      px={{ base: '1rem', lg: '1.5rem' }}
+      minW="595px"
+      gap="1rem"
     >
-      <Box w="35%">
-        <HStack marginEnd="1rem">
-          <Image
-            src={asset.iconUri}
-            fallbackSrc="/images/coin-icon-default.svg"
-            alt={asset.symbol}
-            w="1rem"
-            h="1rem"
-          />
-          <Text
-            height="auto"
-            textStyle="text-base-sans-regular"
-            data-testid="link-token-symbol"
-            noOfLines={2}
-            maxWidth="4.7rem"
-            isTruncated
-          >
-            {asset.address === zeroAddress ? (
-              <EtherscanLinkAddress
-                color="grayscale.100"
-                address={safe}
-              >
-                {asset.symbol}
-              </EtherscanLinkAddress>
-            ) : (
-              <EtherscanLinkERC20
-                color="grayscale.100"
-                address={asset.address}
-              >
-                {asset.symbol}
-              </EtherscanLinkERC20>
-            )}
-          </Text>
-        </HStack>
-      </Box>
-      <Box w="35%">
+      <Flex
+        w="25%"
+        alignItems="center"
+        gap="0.5rem"
+      >
+        <Image
+          src={asset.iconUri}
+          fallbackSrc="/images/coin-icon-default.svg"
+          alt={asset.symbol}
+          w="1rem"
+          h="1rem"
+        />
+        <EtherscanLink
+          color="white-0"
+          _hover={{ bg: 'transparent' }}
+          textStyle="body-base"
+          padding={0}
+          borderWidth={0}
+          value={asset.address === zeroAddress ? safe : asset.address}
+          type="token"
+        >
+          {asset.symbol}
+        </EtherscanLink>
+      </Flex>
+      <Flex
+        w="30%"
+        alignItems="flex-start"
+        flexWrap="wrap"
+      >
         <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-          marginBottom="0.25rem"
           maxWidth="23.8rem"
+          width="100%"
           isTruncated
         >
           <Tooltip
@@ -119,8 +130,9 @@ function CoinRow({
           </Tooltip>
         </Text>
         <Text
-          textStyle="text-sm-sans-regular"
-          color="chocolate.200"
+          textStyle="label-small"
+          color="neutral-7"
+          width="100%"
         >
           <Tooltip
             label={asset.fiatConversion}
@@ -129,34 +141,34 @@ function CoinRow({
             {formatUSD(asset.fiatValue)}
           </Tooltip>
         </Text>
-      </Box>
-      <Box w={'30%'}>
-        <Text
-          align="end"
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {totalFiat > 0 && formatPercentage(asset.fiatValue, totalFiat)}
-        </Text>
-      </Box>
-    </HStack>
+      </Flex>
+      <Flex
+        w="45%"
+        alignItems="flex-start"
+      >
+        <Text>{totalFiat > 0 && formatPercentage(asset.fiatValue, totalFiat)}</Text>
+      </Flex>
+    </Flex>
   );
 }
 
 function NFTHeader() {
   const { t } = useTranslation('treasury');
   return (
-    <Box>
+    <Box
+      marginBottom="1rem"
+      minW="595px"
+    >
       <Divider
-        color="chocolate.700"
+        variant="darker"
         marginTop="0.75rem"
         marginBottom="1.5rem"
       />
       <Text
-        w="33%"
-        textStyle="text-sm-sans-regular"
-        color="chocolate.200"
-        marginBottom="1rem"
+        w="25%"
+        textStyle="label-small"
+        color="neutral-7"
+        px={{ base: '1rem', lg: '1.5rem' }}
       >
         {t('columnNFTs')}
       </Text>
@@ -168,44 +180,56 @@ function NFTRow({ asset, isLast }: { asset: SafeCollectibleResponse; isLast: boo
   const image = asset.imageUri ? asset.imageUri : asset.logoUri;
   const name = asset.name ? asset.name : asset.tokenName;
   const id = asset.id.toString();
+
   return (
-    <HStack marginBottom={isLast ? '0rem' : '1.5rem'}>
-      <EtherscanLinkERC721
-        address={asset.address}
-        tokenId={id}
-        data-testid="link-nft-image"
-      >
-        <Image
-          src={image}
-          fallbackSrc="/images/nft-image-default.svg"
-          alt={name}
-          w="3rem"
-          h="3rem"
-          marginRight="0.75rem"
-        />
-      </EtherscanLinkERC721>
-      <Text
-        textStyle="text-base-sans-regular"
-        color="grayscale.100"
-        data-testid="link-nft-name"
-        noOfLines={1}
-      >
-        <EtherscanLinkAddress address={asset.address}>{name}</EtherscanLinkAddress>
-      </Text>
-      <EtherscanLinkERC721
-        address={asset.address}
-        tokenId={id}
-      >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-          data-testid="link-nft-id"
-          maxWidth="5rem"
-          noOfLines={1}
+    <HStack
+      marginBottom={isLast ? '0rem' : '1.5rem'}
+      px={{ base: '1rem', lg: '1.5rem' }}
+      minW="595px"
+    >
+      <Flex width="15%">
+        <EtherscanLink
+          type="token"
+          value={asset.address}
+          secondaryValue={id}
+          data-testid="link-nft-image"
+          padding={0}
+          _hover={{ bg: 'transparent' }}
         >
-          #{id}
-        </Text>
-      </EtherscanLinkERC721>
+          <Image
+            src={image}
+            fallbackSrc="/images/nft-image-default.svg"
+            alt={name}
+            w="3rem"
+            h="3rem"
+            marginRight="0.75rem"
+          />
+        </EtherscanLink>
+      </Flex>
+      <Flex width="30%">
+        <EtherscanLink
+          type="address"
+          value={asset.address}
+          _hover={{ bg: 'transparent' }}
+          color="white-0"
+          textStyle="body-base"
+        >
+          {name}
+        </EtherscanLink>
+      </Flex>
+      <Flex width="25%">
+        <EtherscanLink
+          type="token"
+          value={asset.address}
+          secondaryValue={id}
+          color="white-0"
+          textStyle="body-base"
+          _hover={{ bg: 'transparent' }}
+          maxW="100%"
+        >
+          <Text as="span">{`#${id}`}</Text>
+        </EtherscanLink>
+      </Flex>
     </HStack>
   );
 }
@@ -221,6 +245,7 @@ export function Assets() {
   const coinDisplay = useFormatCoins(assetsFungible);
   const ethAsset = assetsFungible.find(asset => !asset.tokenAddress);
   const { handleUnstake, handleClaimUnstakedETH } = useLidoStaking();
+  const [expandedIndecies, setExpandedIndecies] = useState<number[]>([]);
 
   // --- Lido Stake button setup ---
   const showStakeButton =
@@ -273,39 +298,55 @@ export function Assets() {
     handleClaimUnstakedETH(BigInt(lidoWithdrawelNFT!.id));
   };
 
+  const hasAssets = coinDisplay.displayData.length > 0 || assetsNonFungible.length > 0;
+  const toggleAccordionItem = (index: number) => {
+    setExpandedIndecies(indexArray => {
+      if (indexArray.includes(index)) {
+        const newArr = [...indexArray];
+        newArr.splice(newArr.indexOf(index), 1);
+        return newArr;
+      } else {
+        return [...indexArray, index];
+      }
+    });
+  };
+
   return (
-    <Box>
+    <Box
+      mt={{ base: '1rem', lg: 0 }}
+      w="full"
+    >
       <Text
-        textStyle="text-sm-sans-regular"
-        color="chocolate.200"
-        marginTop="1.5rem"
-        marginBottom="0.5rem"
+        textStyle="label-small"
+        color="neutral-7"
+        px={{ base: '1rem', lg: '1.5rem' }}
       >
         {t('subtitleCoinBalance')}
       </Text>
       <Text
         data-testid="text-usd-total"
-        textStyle="text-lg-mono-regular"
-        color="grayscale.100"
+        px={{ base: '1rem', lg: '1.5rem' }}
       >
         {formatUSD(coinDisplay.totalFiatValue)}
       </Text>
+      <Hide above="lg">
+        <Divider
+          variant="darker"
+          my="1rem"
+        />
+      </Hide>
       {(showStakeButton || showUnstakeButton || showClaimETHButton) && (
-        <>
-          <Divider
-            color="chocolate.700"
-            marginTop="1.5rem"
-            marginBottom="1.5rem"
-          />
+        <Show above="lg">
+          <Divider my="1rem" />
           <Text
-            textStyle="text-sm-sans-regular"
-            color="chocolate.200"
-            marginTop="1.5rem"
-            marginBottom="1rem"
+            textStyle="label-small"
+            color="neutral-7"
+            my="1rem"
+            px={{ base: '1rem', lg: '1.5rem' }}
           >
             {t('subtitleStaking')}
           </Text>
-          <HStack>
+          <HStack px={{ base: '1rem', lg: '1.5rem' }}>
             {showStakeButton && (
               <Button
                 size="sm"
@@ -334,27 +375,127 @@ export function Assets() {
               </Tooltip>
             )}
           </HStack>
+        </Show>
+      )}
+      {hasAssets && (
+        <>
+          <Hide above="lg">
+            <Accordion
+              allowMultiple
+              index={expandedIndecies}
+            >
+              {coinDisplay.displayData.length > 0 && (
+                <AccordionItem
+                  borderTop="none"
+                  borderBottom="none"
+                >
+                  {({ isExpanded }) => (
+                    <Box>
+                      <AccordionButton
+                        onClick={() => toggleAccordionItem(0)}
+                        p="0.25rem"
+                        textStyle="body-base"
+                        color="white-0"
+                        ml="0.75rem"
+                      >
+                        <Flex
+                          alignItems="center"
+                          gap={2}
+                        >
+                          {isExpanded ? <CaretDown /> : <CaretRight />}
+                          {t('columnCoins')}
+                        </Flex>
+                      </AccordionButton>
+                      <Divider
+                        variant="darker"
+                        my="1rem"
+                      />
+                      <AccordionPanel
+                        p={0}
+                        overflowX="scroll"
+                      >
+                        <CoinHeader />
+                        {coinDisplay.displayData.map((coin, index) => {
+                          return (
+                            <CoinRow
+                              key={index}
+                              safe={daoAddress!}
+                              totalFiat={coinDisplay.totalFiatValue}
+                              asset={coin}
+                            />
+                          );
+                        })}
+                      </AccordionPanel>
+                    </Box>
+                  )}
+                </AccordionItem>
+              )}
+              {assetsNonFungible.length > 0 && (
+                <AccordionItem
+                  borderTop="none"
+                  borderBottom="none"
+                >
+                  {({ isExpanded }) => (
+                    <Box>
+                      <AccordionButton
+                        onClick={() =>
+                          toggleAccordionItem(coinDisplay.displayData.length > 0 ? 1 : 0)
+                        }
+                        p="0.25rem"
+                        textStyle="body-base"
+                        color="white-0"
+                        ml="0.75rem"
+                      >
+                        <Flex
+                          alignItems="center"
+                          gap={2}
+                        >
+                          {isExpanded ? <CaretDown /> : <CaretRight />}
+                          {t('columnNFTs')}
+                        </Flex>
+                      </AccordionButton>
+                      <AccordionPanel
+                        p={0}
+                        overflowX="scroll"
+                      >
+                        <NFTHeader />
+                        {assetsNonFungible.map((asset, index) => (
+                          <NFTRow
+                            key={index}
+                            asset={asset}
+                            isLast={assetsNonFungible[assetsNonFungible.length - 1] === asset}
+                          />
+                        ))}
+                      </AccordionPanel>
+                    </Box>
+                  )}
+                </AccordionItem>
+              )}
+            </Accordion>
+          </Hide>
+          <Show above="lg">
+            {coinDisplay.displayData.length > 0 && <CoinHeader />}
+            {coinDisplay.displayData.map((coin, index) => {
+              return (
+                <CoinRow
+                  key={index}
+                  safe={daoAddress!}
+                  totalFiat={coinDisplay.totalFiatValue}
+                  asset={coin}
+                />
+              );
+            })}
+            {assetsNonFungible.length > 0 && <NFTHeader />}
+            {assetsNonFungible.map((asset, index) => (
+              <NFTRow
+                key={index}
+                asset={asset}
+                isLast={assetsNonFungible[assetsNonFungible.length - 1] === asset}
+              />
+            ))}
+          </Show>
         </>
       )}
-      {coinDisplay.displayData.length > 0 && <CoinHeader />}
-      {coinDisplay.displayData.map((coin, index) => {
-        return (
-          <CoinRow
-            key={index}
-            safe={daoAddress!}
-            totalFiat={coinDisplay.totalFiatValue}
-            asset={coin}
-          />
-        );
-      })}
-      {assetsNonFungible.length > 0 && <NFTHeader />}
-      {assetsNonFungible.map((asset, index) => (
-        <NFTRow
-          key={index}
-          asset={asset}
-          isLast={assetsNonFungible[assetsNonFungible.length - 1] === asset}
-        />
-      ))}
     </Box>
   );
 }
diff --git a/src/components/pages/DAOTreasury/components/Transactions.tsx b/src/components/pages/DAOTreasury/components/Transactions.tsx
index 0f5ccd08ff..57919e87d6 100644
--- a/src/components/pages/DAOTreasury/components/Transactions.tsx
+++ b/src/components/pages/DAOTreasury/components/Transactions.tsx
@@ -1,12 +1,12 @@
-import { Box, Divider, HStack, Image, Spacer, Text, Tooltip } from '@chakra-ui/react';
-import { SquareSolidArrowDown, SquareSolidArrowUp } from '@decent-org/fractal-ui';
+import { Box, Button, HStack, Image, Text, Tooltip, Icon, Flex } from '@chakra-ui/react';
+import { ArrowUp, ArrowDown } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useDateTimeDisplay } from '../../../../helpers/dateTime';
 import { useFractal } from '../../../../providers/App/AppProvider';
+import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { TransferType, AssetTransfer } from '../../../../types';
 import { DisplayAddress } from '../../../ui/links/DisplayAddress';
-import EtherscanLinkAddress from '../../../ui/links/EtherscanLinkAddress';
-import EtherscanLinkTransaction from '../../../ui/links/EtherscanLinkTransaction';
+import EtherscanLink from '../../../ui/links/EtherscanLink';
 import {
   TokenEventType,
   TransferDisplayData,
@@ -15,45 +15,38 @@ import {
 
 function TransferRow({ displayData }: { displayData: TransferDisplayData }) {
   const { t } = useTranslation(['treasury', 'common']);
+  const { etherscanBaseURL } = useNetworkConfig();
+
   return (
-    <Box>
-      <HStack
-        align="center"
-        marginTop="1rem"
-        marginBottom={displayData.isLast ? '0rem' : '1rem'}
-      >
-        <HStack w="33%">
-          <EtherscanLinkTransaction txHash={displayData.transactionHash}>
-            {displayData.eventType == TokenEventType.WITHDRAW ? (
-              <SquareSolidArrowUp
-                w="1.5rem"
-                h="1.5rem"
-                color="grayscale.100"
-              />
-            ) : (
-              <SquareSolidArrowDown
-                w="1.5rem"
-                h="1.5rem"
-                color="#60B55E"
-              />
-            )}
-          </EtherscanLinkTransaction>
-          <Box paddingStart="0.5rem">
+    <Box
+      minW="595px"
+      p="0.25rem"
+      _hover={{ cursor: 'pointer', bg: 'white-alpha-04' }}
+      onClick={() => window.open(`${etherscanBaseURL}/tx/${displayData.transactionHash}`, '_blank')}
+    >
+      <HStack gap="1rem">
+        <Flex
+          minW="135px"
+          alignItems="center"
+          gap="0.5rem"
+        >
+          <Icon
+            as={displayData.eventType == TokenEventType.WITHDRAW ? ArrowUp : ArrowDown}
+            w="1.25rem"
+            h="1.25rem"
+            color="neutral-7"
+          />
+          <Box>
             <Text
-              textStyle="text-sm-sans-regular"
-              color="grayscale.100"
+              textStyle="label-small"
+              color="neutral-7"
             >
               {t(displayData.eventType == TokenEventType.WITHDRAW ? 'labelSent' : 'labelReceived')}
             </Text>
-            <Text
-              textStyle="text-base-sans-regular"
-              color="chocolate.200"
-            >
-              {useDateTimeDisplay(new Date(displayData.executionDate))}
-            </Text>
+            <Text>{useDateTimeDisplay(new Date(displayData.executionDate))}</Text>
           </Box>
-        </HStack>
-        <HStack w="33%">
+        </Flex>
+        <HStack w="30%">
           <Image
             src={displayData.image}
             fallbackSrc={
@@ -62,8 +55,8 @@ function TransferRow({ displayData }: { displayData: TransferDisplayData }) {
                 : '/images/coin-icon-default.svg'
             }
             alt={displayData.assetDisplay}
-            w="1.5rem"
-            h="1.5rem"
+            w="1.25rem"
+            h="1.25rem"
           />
           <Tooltip
             label={
@@ -74,12 +67,8 @@ function TransferRow({ displayData }: { displayData: TransferDisplayData }) {
             placement="top-start"
           >
             <Text
-              textStyle="text-base-sans-regular"
               maxWidth="15rem"
               noOfLines={1}
-              color={
-                displayData.eventType === TokenEventType.WITHDRAW ? 'grayscale.100' : '#60B55E'
-              }
               data-testid={
                 displayData.transferType === TransferType.ERC721_TRANSFER
                   ? 'link-token-name'
@@ -91,15 +80,18 @@ function TransferRow({ displayData }: { displayData: TransferDisplayData }) {
             </Text>
           </Tooltip>
         </HStack>
-        <HStack w="33%">
-          <Spacer />
+        <HStack
+          w="40%"
+          justifyContent="flex-end"
+        >
           <DisplayAddress
             data-testid="link-transfer-address"
             address={displayData.transferAddress}
+            textAlign="end"
+            onClick={e => e.stopPropagation()}
           />
         </HStack>
       </HStack>
-      {!displayData.isLast && <Divider color="chocolate.700" />}
     </Box>
   );
 }
@@ -108,35 +100,19 @@ function EmptyTransactions() {
   const { t } = useTranslation('treasury');
   return (
     <Text
-      textStyle="text-base-sans-regular"
-      color="grayscale.100"
+      textStyle="body-base-strong"
+      color="neutral-7"
       data-testid="text-empty-transactions"
       marginTop="1rem"
       align="center"
+      px={{ base: '1rem', lg: '1.5rem' }}
     >
       {t('textEmptyTransactions')}
     </Text>
   );
 }
 
-function MoreTransactions({ address }: { address: string | null }) {
-  const { t } = useTranslation('treasury');
-  return (
-    <EtherscanLinkAddress address={address}>
-      <Text
-        textStyle="text-sm-sans-regular"
-        color="grayscale.100"
-        data-testid="link-more-transactions"
-        marginTop="1rem"
-        align="center"
-      >
-        {t('textMoreTransactions')}
-      </Text>
-    </EtherscanLinkAddress>
-  );
-}
-
-export function Transactions() {
+export function Transactions({ shownTransactions }: { shownTransactions: number }) {
   const {
     node: { daoAddress },
     treasury: { transfers },
@@ -150,16 +126,75 @@ export function Transactions() {
   if (!transfers || transfers.results.length === 0) return <EmptyTransactions />;
 
   return (
-    <Box>
-      {displayData.map((transfer, index) => {
-        return (
-          <TransferRow
-            key={index}
-            displayData={transfer}
-          />
-        );
-      })}
-      {transfers.next && <MoreTransactions address={daoAddress} />}
+    <Box px={{ base: '1rem', lg: '1.5rem' }}>
+      {displayData.slice(0, shownTransactions - 1).map((transfer, i) => (
+        <TransferRow
+          key={i}
+          displayData={transfer}
+        />
+      ))}
     </Box>
   );
 }
+
+export function PaginationButton({ onClick }: { onClick: () => void }) {
+  const { t } = useTranslation('treasury');
+  return (
+    <Flex
+      w="full"
+      mt="1rem"
+      justifyContent="center"
+    >
+      {/* @todo - this should be <Button variant="button-pill" /> from theme, same as CeleryButtonWithIcon */}
+      <Button
+        h="1.75rem"
+        py="0.25rem"
+        px="0.75rem"
+        borderRadius="full"
+        bg="neutral-3"
+        color="lilac-0"
+        onClick={onClick}
+      >
+        {t('textMoreTransactions')}
+      </Button>
+    </Flex>
+  );
+}
+
+export function PaginationCount({
+  totalTransfers,
+  shownTransactions,
+  daoAddress,
+}: {
+  totalTransfers: number;
+  shownTransactions: number;
+  daoAddress: string | null;
+}) {
+  const { t } = useTranslation('treasury');
+  if (!totalTransfers || !daoAddress) {
+    return null;
+  }
+  return (
+    <Flex gap="0.25rem">
+      <Text
+        color="neutral-7"
+        textStyle="helper-text-base"
+      >
+        {t('transactionsShownCount', {
+          count: totalTransfers > shownTransactions ? shownTransactions : totalTransfers,
+        })}
+      </Text>
+      <EtherscanLink
+        type="address"
+        value={daoAddress}
+        p={0}
+        textStyle="helper-text-base"
+        outline="unset"
+        outlineOffset="unset"
+        borderWidth={0}
+      >
+        {t('transactionsTotalCount', { count: totalTransfers })}
+      </EtherscanLink>
+    </Flex>
+  );
+}
diff --git a/src/components/pages/DAOTreasury/hooks/useFormatCoins.tsx b/src/components/pages/DAOTreasury/hooks/useFormatCoins.tsx
index 4eb7220a63..62f23cdfc8 100644
--- a/src/components/pages/DAOTreasury/hooks/useFormatCoins.tsx
+++ b/src/components/pages/DAOTreasury/hooks/useFormatCoins.tsx
@@ -60,9 +60,15 @@ export function useFormatCoins(assets: SafeBalanceResponse[]) {
         const formatted: TokenDisplayData = {
           iconUri: asset.token === null ? nativeTokenIcon : asset.token.logoUri,
           address: asset.tokenAddress === null ? zeroAddress : asset.tokenAddress,
-          truncatedCoinTotal: formatCoin(asset.balance, true, asset?.token?.decimals, symbol),
+          truncatedCoinTotal: formatCoin(
+            asset.balance,
+            true,
+            asset?.token?.decimals,
+            symbol,
+            false,
+          ),
           fiatValue: tokenFiatBalance,
-          symbol: symbol,
+          symbol,
           fiatConversion: tokenPrice ? `1 ${symbol} = ${formatUSD(tokenPrice)}` : 'N/A',
           fullCoinTotal: formatCoin(asset.balance, false, asset?.token?.decimals, symbol),
           fiatDisplayValue: formatUSD(tokenFiatBalance),
diff --git a/src/components/pages/DaoDashboard/Activities/ActivityFreeze.tsx b/src/components/pages/DaoDashboard/Activities/ActivityFreeze.tsx
index d74198c7ec..ec93258aaa 100644
--- a/src/components/pages/DaoDashboard/Activities/ActivityFreeze.tsx
+++ b/src/components/pages/DaoDashboard/Activities/ActivityFreeze.tsx
@@ -11,8 +11,8 @@ export function FreezeDescription({ isFrozen }: { isFrozen: boolean }) {
   const { t } = useTranslation('dashboard');
   return (
     <Text
-      color="grayscale.100"
-      textStyle="text-lg-mono-semibold"
+      color="neutral-7"
+      textStyle="body-base-strong"
       gap="0.5rem"
     >
       {t(isFrozen ? 'frozenDescription' : 'freezeDescription')}
diff --git a/src/components/pages/DaoDashboard/Activities/hooks/useActivities.ts b/src/components/pages/DaoDashboard/Activities/hooks/useActivities.ts
index 4e12ecf805..ef33f5dcf6 100644
--- a/src/components/pages/DaoDashboard/Activities/hooks/useActivities.ts
+++ b/src/components/pages/DaoDashboard/Activities/hooks/useActivities.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useFractal } from '../../../../../providers/App/AppProvider';
-import { Activity, SortBy } from '../../../../../types';
+import { Activity, ActivityEventType, SortBy } from '../../../../../types';
 
 export const useActivities = (sortBy: SortBy) => {
   const {
@@ -12,14 +12,20 @@ export const useActivities = (sortBy: SortBy) => {
    * updates when a different sort is selected
    */
   const sortedActivities: Activity[] = useMemo(() => {
-    return [...(proposals || [])].sort((a, b) => {
-      const dataA = new Date(a.eventDate).getTime();
-      const dataB = new Date(b.eventDate).getTime();
-      if (sortBy === SortBy.Oldest) {
-        return dataA - dataB;
-      }
-      return dataB - dataA;
-    });
+    return (
+      (proposals || [])
+        // Do not display Module transactions for now
+        // https://github.com/decentdao/fractal-interface/issues/1712
+        .filter(activity => activity.eventType !== ActivityEventType.Module)
+        .sort((a, b) => {
+          const dataA = new Date(a.eventDate).getTime();
+          const dataB = new Date(b.eventDate).getTime();
+          if (sortBy === SortBy.Oldest) {
+            return dataA - dataB;
+          }
+          return dataB - dataA;
+        })
+    );
   }, [sortBy, proposals]);
 
   return { sortedActivities };
diff --git a/src/components/pages/DaoDashboard/Activities/index.tsx b/src/components/pages/DaoDashboard/Activities/index.tsx
index 409dd63169..496936e8c5 100644
--- a/src/components/pages/DaoDashboard/Activities/index.tsx
+++ b/src/components/pages/DaoDashboard/Activities/index.tsx
@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { ActivityEventType, SortBy, TreasuryActivity, FractalProposal } from '../../../../types';
-import { ActivityModule } from '../../../Activity/ActivityModule';
 import { ActivityTreasury } from '../../../Activity/ActivityTreasury';
 import ProposalCard from '../../../Proposals/ProposalCard/ProposalCard';
 import { EmptyBox } from '../../../ui/containers/EmptyBox';
@@ -25,8 +24,9 @@ export function Activities() {
   return (
     <Box>
       <Flex
-        justifyContent="flex-end"
+        justifyContent="flex-start"
         alignItems="center"
+        mx="0.5rem"
         my="1rem"
       >
         <Sort
@@ -57,14 +57,6 @@ export function Activities() {
                   />
                 );
               }
-              if (activity.eventType === ActivityEventType.Module) {
-                return (
-                  <ActivityModule
-                    key={i}
-                    activity={activity as FractalProposal}
-                  />
-                );
-              }
               return (
                 <ActivityTreasury
                   key={i}
diff --git a/src/components/pages/DaoDashboard/ERC20Claim.tsx b/src/components/pages/DaoDashboard/ERC20Claim.tsx
index 1ef2d47c42..7223d30d3d 100644
--- a/src/components/pages/DaoDashboard/ERC20Claim.tsx
+++ b/src/components/pages/DaoDashboard/ERC20Claim.tsx
@@ -81,10 +81,7 @@ export function ERCO20Claim() {
       >
         <AlertIcon boxSize="24px" />
         <AlertTitle>
-          <Text
-            textStyle="text-lg-mono-medium"
-            whiteSpace="pre-wrap"
-          >
+          <Text whiteSpace="pre-wrap">
             {t('alertTokenClaim', {
               amount: claimableString,
             })}
diff --git a/src/components/pages/DaoDashboard/Info/index.tsx b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
similarity index 83%
rename from src/components/pages/DaoDashboard/Info/index.tsx
rename to src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
index cd23782f99..f98e94a0b1 100644
--- a/src/components/pages/DaoDashboard/Info/index.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoInfoHeader.tsx
@@ -1,21 +1,14 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { DAO_ROUTES } from '../../../../constants/routes';
 import useDAOMetadata from '../../../../hooks/DAO/useDAOMetadata';
-import { useFractal } from '../../../../providers/App/AppProvider';
-import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { DAOInfoCard } from '../../../ui/cards/DAOInfoCard';
 import { InfoBox } from '../../../ui/containers/InfoBox';
 import ExternalLink from '../../../ui/links/ExternalLink';
-import { InfoDAO } from './InfoDAO';
 import { InfoGovernance } from './InfoGovernance';
 import { InfoProposals } from './InfoProposals';
 import { InfoTreasury } from './InfoTreasury';
 import { ParentLink } from './ParentLink';
 
-export function Info() {
-  const {
-    node: { daoAddress },
-  } = useFractal();
-  const { addressPrefix } = useNetworkConfig();
+export function DaoInfoHeader() {
   const daoMetadata = useDAOMetadata();
 
   // using this gap method instead of 'gap' to make width percentages more precise, since they
@@ -32,7 +25,8 @@ export function Info() {
       <Flex
         flexWrap="wrap"
         justifyContent="space-between"
-        mb="1rem"
+        mb="2rem"
+        gap={{ base: '1rem', lg: 0 }}
       >
         <Box
           width={{ base: '100%', md: '100%', lg: '33%', xl: '40%' }}
@@ -40,7 +34,7 @@ export function Info() {
           pb={{ sm: PAD, lg: NONE }}
         >
           <InfoBox>
-            <InfoDAO />
+            <DAOInfoCard />
           </InfoBox>
         </Box>
         {daoMetadata ? (
@@ -80,7 +74,6 @@ export function Info() {
                   position="relative"
                   minWidth="auto"
                   width="50%"
-                  p="1.5rem"
                   key={index}
                 >
                   {section.background && (
@@ -98,13 +91,8 @@ export function Info() {
                       backgroundPosition="50%"
                     />
                   )}
-                  <Text
-                    textStyle="text-lg-mono-regular"
-                    marginBottom={2}
-                  >
-                    {section.title}
-                  </Text>
-                  <Text textStyle="text-base-mono-regular">
+                  <Text marginBottom={2}>{section.title}</Text>
+                  <Text>
                     {section.link && section.link.position === 'start' && (
                       <ExternalLink href={section.link.url}>{section.link.text}</ExternalLink>
                     )}
@@ -130,6 +118,7 @@ export function Info() {
                 <InfoGovernance />
               </InfoBox>
             </Box>
+
             <Box
               width={{ base: '100%', md: '33.3%', lg: '19%', xl: '20%' }}
               ps={{ base: NONE, md: PAD }}
@@ -137,16 +126,17 @@ export function Info() {
               pb={{ sm: PAD, md: NONE }}
               pt={{ sm: PAD, lg: NONE }}
             >
-              <InfoBox to={DAO_ROUTES.proposals.relative(addressPrefix, daoAddress || '')}>
+              <InfoBox>
                 <InfoProposals />
               </InfoBox>
             </Box>
+
             <Box
               width={{ base: '100%', md: '33.3%', lg: '23%', xl: '20%' }}
               ps={{ base: NONE, md: PAD }}
               pt={{ sm: PAD, lg: NONE }}
             >
-              <InfoBox to={DAO_ROUTES.treasury.relative(addressPrefix, daoAddress || '')}>
+              <InfoBox>
                 <InfoTreasury />
               </InfoBox>
             </Box>
diff --git a/src/components/pages/DaoDashboard/Info/InfoHeader.tsx b/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
similarity index 69%
rename from src/components/pages/DaoDashboard/Info/InfoHeader.tsx
rename to src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
index 5efbe40fb4..e2de50c439 100644
--- a/src/components/pages/DaoDashboard/Info/InfoHeader.tsx
+++ b/src/components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader.tsx
@@ -1,20 +1,17 @@
 import { Box, Flex, Image, Menu, MenuButton, MenuList, Text } from '@chakra-ui/react';
 import { ArrowAngleUp, Burger } from '@decent-org/fractal-ui';
 import { useTranslation } from 'react-i18next';
-import useDAOMetadata from '../../../../hooks/DAO/useDAOMetadata';
 import { useFractal } from '../../../../providers/App/AppProvider';
+import { DAOMetadata } from '../../../../types';
 import ExternalLink from '../../../ui/links/ExternalLink';
 
-export default function InfoHeader() {
+export function DaoSpecificMetadataHeader(props: { metadata: DAOMetadata }) {
   const {
     node: { daoName },
   } = useFractal();
-  const daoMetadata = useDAOMetadata();
   const { t } = useTranslation();
 
-  if (!daoMetadata) {
-    return null;
-  }
+  const { metadata: daoMetadata } = props;
 
   return (
     <Flex
@@ -39,40 +36,24 @@ export default function InfoHeader() {
           <MenuButton>
             <Flex alignItems="center">
               <Burger boxSize="1.5rem" />
-              <Text
-                textStyle="text-lg-mono-regular"
-                ml={4}
-              >
-                {daoName}
-              </Text>
+              <Text ml={4}>{daoName}</Text>
             </Flex>
           </MenuButton>
           <MenuList
             rounded="lg"
-            shadow="menu-gold"
             mr={['auto', '1rem']}
-            bg="grayscale.black"
             border="none"
             padding="1rem 1.5rem"
             zIndex={1000}
           >
-            <Text
-              textStyle="text-sm-sans-regular"
-              color="chocolate.200"
-              marginBottom="0.5rem"
-            >
-              {t('goTo')}
-            </Text>
+            <Text marginBottom="0.5rem">{t('goTo')}</Text>
             <Flex
               gap={4}
               flexDirection="column"
             >
               {daoMetadata.links.map(link => (
                 <Box key={link.url}>
-                  <ExternalLink
-                    href={link.url}
-                    color="grayscale.100"
-                  >
+                  <ExternalLink href={link.url}>
                     {link.title}{' '}
                     <ArrowAngleUp
                       boxSize="1.5rem"
diff --git a/src/components/pages/DaoDashboard/Info/InfoDAO.tsx b/src/components/pages/DaoDashboard/Info/InfoDAO.tsx
deleted file mode 100644
index 9f97a2c05e..0000000000
--- a/src/components/pages/DaoDashboard/Info/InfoDAO.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useFractal } from '../../../../providers/App/AppProvider';
-import { DAOInfoCard } from '../../../ui/cards/DAOInfoCard';
-
-/**
- * Info card on the DAO homepage, which typically appears as roughly
- * 1/2 of the screen width, along with the Governance, Proposals,
- * and Treasury info cards.
- */
-export function InfoDAO() {
-  const { node, guardContracts, guard } = useFractal();
-  return (
-    <DAOInfoCard
-      h="8.5rem"
-      parentAddress={node.nodeHierarchy.parentAddress || undefined}
-      node={node}
-      childCount={node.nodeHierarchy.childNodes.length}
-      freezeGuard={guard}
-      guardContracts={guardContracts}
-    />
-  );
-}
diff --git a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
index a2362e67f4..7dbe8b7086 100644
--- a/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoGovernance.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Govern } from '@decent-org/fractal-ui';
+import { Bank } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSafeContracts from '../../../../hooks/safe/useSafeContracts';
@@ -85,40 +85,27 @@ export function InfoGovernance() {
   const governanceAzorius = dao?.isAzorius ? (governance as AzoriusGovernance) : undefined;
 
   return (
-    <Box
-      data-testid="dashboard-daoGovernance"
-      textStyle="text-sm-sans-regular"
-    >
+    <Box data-testid="dashboard-daoGovernance">
       <Flex
         alignItems="center"
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Govern />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleGovernance')}
-        </Text>
+        <Bank size="1.5rem" />
+        <Text textStyle="display-lg">{t('titleGovernance')}</Text>
       </Flex>
 
       <Flex
         alignItems="center"
         justifyContent="space-between"
         mb="0.25rem"
+        gap="0.5rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titleType')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {governance.type ? t(governance.type.toString(), { ns: 'daoCreate' }) : ''}
+        <Text color="neutral-7">{t('titleType')}</Text>
+        <Text textAlign="right">
+          {governance.type
+            ? t(governance.type.toString(), { ns: 'daoCreate' })
+            : t('loading', { ns: 'common' })}
         </Text>
       </Flex>
 
@@ -127,19 +114,10 @@ export function InfoGovernance() {
           alignItems="center"
           justifyContent="space-between"
           mb="0.25rem"
+          gap="0.5rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleVotingPeriod')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {governanceAzorius.votingStrategy?.votingPeriod?.formatted}
-          </Text>
+          <Text color="neutral-7">{t('titleVotingPeriod')}</Text>
+          <Text textAlign="right">{governanceAzorius.votingStrategy?.votingPeriod?.formatted}</Text>
         </Flex>
       )}
       {governanceAzorius?.votingStrategy?.quorumPercentage && (
@@ -147,17 +125,10 @@ export function InfoGovernance() {
           alignItems="center"
           justifyContent="space-between"
           mb="0.25rem"
+          gap="0.5rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleQuorum')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
+          <Text color="neutral-7">{t('titleQuorum')}</Text>
+          <Text textAlign="right">
             {governanceAzorius.votingStrategy.quorumPercentage.formatted}
           </Text>
         </Flex>
@@ -167,17 +138,10 @@ export function InfoGovernance() {
           alignItems="center"
           justifyContent="space-between"
           mb="0.25rem"
+          gap="0.5rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('titleQuorum')}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
+          <Text color="neutral-7">{t('titleQuorum')}</Text>
+          <Text textAlign="right">
             {governanceAzorius.votingStrategy.quorumThreshold.formatted}
           </Text>
         </Flex>
@@ -187,19 +151,10 @@ export function InfoGovernance() {
           alignItems="center"
           justifyContent="space-between"
           mb="0.25rem"
+          gap="0.5rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('timelock', { ns: 'common' })}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {timelockPeriod}
-          </Text>
+          <Text color="neutral-7">{t('timelock', { ns: 'common' })}</Text>
+          <Text textAlign="right">{timelockPeriod}</Text>
         </Flex>
       )}
       {executionPeriod && (
@@ -207,19 +162,10 @@ export function InfoGovernance() {
           alignItems="center"
           justifyContent="space-between"
           mb="0.25rem"
+          gap="0.5rem"
         >
-          <Text
-            textStyle="text-base-sans-regular"
-            color="chocolate.200"
-          >
-            {t('execution', { ns: 'common' })}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {executionPeriod}
-          </Text>
+          <Text color="neutral-7">{t('execution', { ns: 'common' })}</Text>
+          <Text textAlign="right">{executionPeriod}</Text>
         </Flex>
       )}
     </Box>
diff --git a/src/components/pages/DaoDashboard/Info/InfoProposals.tsx b/src/components/pages/DaoDashboard/Info/InfoProposals.tsx
index 9278ccb1b8..f189da5ee1 100644
--- a/src/components/pages/DaoDashboard/Info/InfoProposals.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoProposals.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Proposals } from '@decent-org/fractal-ui';
+import { Scroll } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { FractalProposalState } from '../../../../types';
@@ -51,13 +51,8 @@ export function InfoProposals({}: IDAOGovernance) {
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Proposals />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleProposals')}
-        </Text>
+        <Scroll size="1.5rem" />
+        <Text>{t('titleProposals')}</Text>
       </Flex>
 
       <Flex
@@ -65,36 +60,16 @@ export function InfoProposals({}: IDAOGovernance) {
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titlePending')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {active}
-        </Text>
+        <Text color="neutral-7">{t('titlePending')}</Text>
+        <Text>{active}</Text>
       </Flex>
       <Flex
         alignItems="center"
         justifyContent="space-between"
         mb="0.25rem"
       >
-        <Text
-          textStyle="text-base-sans-regular"
-          color="chocolate.200"
-        >
-          {t('titlePassed')}
-        </Text>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {passed}
-        </Text>
+        <Text color="neutral-7">{t('titlePassed')}</Text>
+        <Text>{passed}</Text>
       </Flex>
     </Box>
   );
diff --git a/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx b/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx
index 7646513173..96807c680f 100644
--- a/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx
+++ b/src/components/pages/DaoDashboard/Info/InfoTreasury.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
-import { Treasury } from '@decent-org/fractal-ui';
+import { Coins } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { formatUSD } from '../../../../utils';
@@ -37,21 +37,11 @@ export function InfoTreasury({}: IDAOGovernance) {
         gap="0.4rem"
         mb="0.5rem"
       >
-        <Treasury />
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="grayscale.100"
-        >
-          {t('titleTreasury')}
-        </Text>
+        <Coins size="1.5rem" />
+        <Text textStyle="display-lg">{t('titleTreasury')}</Text>
       </Flex>
 
-      <Text
-        textStyle="text-lg-mono-semibold"
-        color="grayscale.100"
-      >
-        {formatUSD(totalFiatValue)}
-      </Text>
+      <Text>{formatUSD(totalFiatValue)}</Text>
     </Box>
   );
 }
diff --git a/src/components/pages/DaoDashboard/Info/ParentLink.tsx b/src/components/pages/DaoDashboard/Info/ParentLink.tsx
index d496bbdcae..396acb0ddc 100644
--- a/src/components/pages/DaoDashboard/Info/ParentLink.tsx
+++ b/src/components/pages/DaoDashboard/Info/ParentLink.tsx
@@ -1,4 +1,5 @@
-import { Link, HStack, Image, Text } from '@chakra-ui/react';
+import { Link, HStack, Text, Icon } from '@chakra-ui/react';
+import { ArrowBendLeftUp } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../../constants/routes';
@@ -22,27 +23,22 @@ export function ParentLink() {
 
   return (
     <Link
-      color="gold.500"
-      _hover={{ textDecoration: 'none', color: 'gold.500-hover' }}
+      color="celery-0"
+      _hover={{ textDecoration: 'none', color: 'celery--6' }}
       to={DAO_ROUTES.dao.relative(addressPrefix, nodeHierarchy.parentAddress)}
       onClick={action.resetDAO}
       marginBottom="1rem"
       as={RouterLink}
+      width="fit-content"
     >
       <HStack>
-        <Image
-          alignSelf="center"
+        <Icon
+          color="lilac-0"
+          as={ArrowBendLeftUp}
           width="1.5rem"
           height="1.5rem"
-          src="/images/arrow-up-left.svg"
-          alt={t('parentLink')}
         />
-        <Text
-          textStyle="text-base-mono-bold"
-          flexWrap="wrap"
-        >
-          {t('parentLink')}
-        </Text>
+        <Text flexWrap="wrap">{t('parentLink')}</Text>
       </HStack>
     </Link>
   );
diff --git a/src/components/pages/DaoHierarchy/DaoHierarchyNode.tsx b/src/components/pages/DaoHierarchy/DaoHierarchyNode.tsx
new file mode 100644
index 0000000000..bac0a4db87
--- /dev/null
+++ b/src/components/pages/DaoHierarchy/DaoHierarchyNode.tsx
@@ -0,0 +1,109 @@
+import { Flex, Icon } from '@chakra-ui/react';
+import { ArrowElbowDownRight } from '@phosphor-icons/react';
+import { useCallback, useEffect, useState } from 'react';
+import { Address, getAddress, zeroAddress } from 'viem';
+import { useLoadDAONode } from '../../../hooks/DAO/loaders/useLoadDAONode';
+import { useLoadDAOData } from '../../../hooks/DAO/useDAOData';
+import { useFractal } from '../../../providers/App/AppProvider';
+import { FractalNode, WithError } from '../../../types';
+import { DAONodeInfoCard, NODE_HEIGHT_REM } from '../../ui/cards/DAONodeInfoCard';
+
+/**
+ * A recursive component that displays a "hierarchy" of DAOInfoCards.
+ *
+ * The initial declaration of this component should provide the info of
+ * the DAO you would like to display at the top level of the hierarchy.
+ *
+ * From this initial DAO info, the component will get the DAO's children
+ * and display another DaoNode for each child, and so on for their children.
+ */
+export function DaoHierarchyNode({
+  parentAddress,
+  daoAddress,
+  depth,
+}: {
+  parentAddress: Address | null;
+  daoAddress: Address | null;
+  depth: number;
+}) {
+  const {
+    node: { daoAddress: currentDAOAddress },
+  } = useFractal();
+  const [fractalNode, setNode] = useState<FractalNode>();
+  const { loadDao } = useLoadDAONode();
+  const { daoData } = useLoadDAOData(parentAddress, fractalNode);
+
+  // calculates the total number of descendants below the given node
+  const getTotalDescendants = useCallback((node: FractalNode): number => {
+    let count = node.nodeHierarchy.childNodes.length;
+    node.nodeHierarchy.childNodes.forEach(child => {
+      count += getTotalDescendants(child as FractalNode);
+    });
+    return count;
+  }, []);
+
+  useEffect(() => {
+    if (daoAddress) {
+      loadDao(getAddress(daoAddress)).then(_node => {
+        const errorNode = _node as WithError;
+        if (!errorNode.error) {
+          const fnode = _node as FractalNode;
+          setNode(fnode);
+        } else if (errorNode.error === 'errorFailedSearch') {
+          setNode({
+            daoName: null,
+            daoAddress,
+            safe: null,
+            fractalModules: [],
+            nodeHierarchy: {
+              parentAddress: null,
+              childNodes: [],
+            },
+          });
+        }
+      });
+    }
+  }, [loadDao, daoAddress, depth, getTotalDescendants]);
+
+  return (
+    <Flex
+      flexDirection="column"
+      alignItems="stretch"
+      gap="1.25rem"
+      width="100%"
+    >
+      <DAONodeInfoCard
+        node={fractalNode}
+        freezeGuard={daoData?.freezeGuard}
+        guardContracts={daoData?.freezeGuardContracts}
+      />
+
+      {/* CHILD NODES */}
+      {fractalNode?.nodeHierarchy.childNodes.map(childNode => (
+        <Flex
+          minH={`${NODE_HEIGHT_REM}rem`}
+          key={childNode.daoAddress}
+          gap="1.25rem"
+        >
+          <Icon
+            as={ArrowElbowDownRight}
+            my={`${NODE_HEIGHT_REM / 2.5}rem`}
+            ml="0.5rem"
+            boxSize="32px"
+            color={
+              currentDAOAddress === getAddress(childNode.daoAddress || zeroAddress)
+                ? 'celery-0'
+                : 'neutral-6'
+            }
+          />
+
+          <DaoHierarchyNode
+            parentAddress={daoAddress}
+            daoAddress={childNode.daoAddress}
+            depth={depth + 1}
+          />
+        </Flex>
+      ))}
+    </Flex>
+  );
+}
diff --git a/src/components/pages/DaoHierarchy/DaoNode.tsx b/src/components/pages/DaoHierarchy/DaoNode.tsx
deleted file mode 100644
index d92c057cf0..0000000000
--- a/src/components/pages/DaoHierarchy/DaoNode.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
-import { Address, getAddress } from 'viem';
-import { useLoadDAONode } from '../../../hooks/DAO/loaders/useLoadDAONode';
-import { useLoadDAOData } from '../../../hooks/DAO/useDAOData';
-import { useFractal } from '../../../providers/App/AppProvider';
-import { FractalNode, WithError } from '../../../types';
-import { DAONodeRow } from '../../ui/cards/DAONodeRow';
-import { NodeLineVertical } from './NodeLines';
-
-/**
- * A recursive component that displays a "hierarchy" of DAOInfoCards.
- *
- * The initial declaration of this component should provide the info of
- * the DAO you would like to display at the top level of the hierarchy.
- *
- * From this initial DAO info, the component will get the DAO's children
- * and display another DaoNode for each child, and so on for their children.
- */
-export function DaoNode({
-  parentAddress,
-  daoAddress,
-  depth,
-}: {
-  parentAddress?: Address;
-  daoAddress?: Address;
-  depth: number;
-}) {
-  const [fractalNode, setNode] = useState<FractalNode>();
-  const { loadDao } = useLoadDAONode();
-  const { daoData } = useLoadDAOData(fractalNode, parentAddress);
-  const [lastChildDescendants, setLastChildDescendants] = useState<number>(0);
-
-  const {
-    node: { daoAddress: currentDAOAddress }, // used ONLY to determine if we're on the current DAO
-  } = useFractal();
-
-  const isCurrentDAO = daoAddress === currentDAOAddress;
-
-  useEffect(() => {
-    if (daoAddress) {
-      loadDao(getAddress(daoAddress)).then(_node => {
-        const errorNode = _node as WithError;
-        if (!errorNode.error) {
-          // calculates the total number of descendants below the given node
-          const getTotalDescendants = (node: FractalNode): number => {
-            let count = node.nodeHierarchy.childNodes.length;
-            node.nodeHierarchy.childNodes.forEach(child => {
-              count += getTotalDescendants(child as FractalNode);
-            });
-            return count;
-          };
-
-          const fnode = _node as FractalNode;
-          setNode(fnode);
-          // calculate the total number of descendants of the last child
-          // in the current hierarchy level
-          // this allows us to properly calculate how far down the vertical
-          // line should extend
-          setLastChildDescendants(
-            fnode.nodeHierarchy.childNodes.length > 0
-              ? getTotalDescendants(
-                  fnode.nodeHierarchy.childNodes[
-                    fnode.nodeHierarchy.childNodes.length - 1
-                  ] as FractalNode,
-                )
-              : 0,
-          );
-        } else if (errorNode.error === 'errorFailedSearch') {
-          setNode({
-            daoName: null,
-            daoAddress,
-            safe: null,
-            fractalModules: [],
-            nodeHierarchy: {
-              parentAddress: null,
-              childNodes: [],
-            },
-          });
-        }
-      });
-    }
-  }, [loadDao, daoAddress, depth]);
-
-  return (
-    <Box position="relative">
-      <DAONodeRow
-        parentAddress={parentAddress}
-        node={fractalNode}
-        childCount={fractalNode?.nodeHierarchy.childNodes.length}
-        guardContracts={daoData?.freezeGuardContracts}
-        freezeGuard={daoData?.freezeGuard}
-        depth={depth}
-      />
-      <NodeLineVertical
-        trueDepth={depth}
-        lastChildDescendants={lastChildDescendants}
-        isCurrentDAO={isCurrentDAO}
-      />
-      {fractalNode?.nodeHierarchy.childNodes.map(childNode => (
-        <Box
-          key={childNode.daoAddress}
-          ml={24}
-          position="relative"
-        >
-          <DaoNode
-            parentAddress={daoAddress}
-            daoAddress={childNode.daoAddress || undefined}
-            depth={depth + 1}
-          />
-        </Box>
-      ))}
-    </Box>
-  );
-}
diff --git a/src/components/pages/DaoHierarchy/NodeLines.tsx b/src/components/pages/DaoHierarchy/NodeLines.tsx
deleted file mode 100644
index 73bc1eb2f0..0000000000
--- a/src/components/pages/DaoHierarchy/NodeLines.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Box, Flex } from '@chakra-ui/react';
-import { useMemo } from 'react';
-import { NODE_HEIGHT_REM, NODE_MARGIN_TOP_REM } from '../../ui/cards/DAONodeRow';
-
-interface INodeLine {
-  isCurrentDAO?: boolean;
-  trueDepth?: number;
-  isFirstChild?: boolean;
-  /**
-   * The number of descendents of the last child, used to calculate
-   * how much height to cut off the bottom of the vertical node line.
-   */
-  lastChildDescendants?: number;
-}
-
-export function NodeLineVertical({ isCurrentDAO, trueDepth = 0, lastChildDescendants }: INodeLine) {
-  const lineHeight = useMemo(() => {
-    return `calc(100% - ${
-      (NODE_HEIGHT_REM + NODE_MARGIN_TOP_REM) * lastChildDescendants! + NODE_HEIGHT_REM / 2
-    }rem)`;
-  }, [lastChildDescendants]);
-
-  return (
-    <Box
-      position="absolute"
-      h={`calc(100% - ${NODE_HEIGHT_REM + NODE_MARGIN_TOP_REM}rem)`}
-      w="100%"
-      bottom={0}
-      overflow="hidden"
-    >
-      <Box
-        position="relative"
-        height="100%"
-      >
-        <Box
-          borderRadius="100%"
-          boxSize="7px"
-          ml="1.80rem"
-          mb={1}
-          position="absolute"
-          zIndex={2}
-          bg={isCurrentDAO && trueDepth === 0 ? 'gold.500' : 'chocolate.400'}
-        />
-        <Box
-          position="absolute"
-          h={lineHeight}
-          bg="chocolate.400"
-          mb="3.3rem"
-          w="1px"
-          ml={8}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-export function NodeLineHorizontal({ isCurrentDAO, isFirstChild }: INodeLine) {
-  if (isFirstChild) {
-    return null;
-  }
-  return (
-    <Flex
-      w="50px"
-      h="full"
-      alignItems="center"
-      position="absolute"
-      justifyContent="center"
-      left={-16}
-      mt={-4}
-    >
-      <Box
-        height="1px"
-        bg={isCurrentDAO ? 'gold.500' : 'chocolate.400'}
-        w="calc(100% - 6px)"
-      />
-      <Box
-        borderRadius="100%"
-        boxSize="6px"
-        bg={isCurrentDAO ? 'gold.500' : 'chocolate.400'}
-      />
-    </Flex>
-  );
-}
diff --git a/src/components/pages/DaoSettings/index.tsx b/src/components/pages/DaoSettings/DAOSettingsContent.tsx
similarity index 58%
rename from src/components/pages/DaoSettings/index.tsx
rename to src/components/pages/DaoSettings/DAOSettingsContent.tsx
index 9c79d117c3..38af326974 100644
--- a/src/components/pages/DaoSettings/index.tsx
+++ b/src/components/pages/DaoSettings/DAOSettingsContent.tsx
@@ -1,14 +1,14 @@
-import { Divider, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { GovernanceType } from '../../../types';
 import { BarLoader } from '../../ui/loaders/BarLoader';
-import ERC20TokenContainer from './components/ERC20Token';
-import ERC721TokensContainer from './components/ERC721Token';
-import MetadataContainer from './components/Metadata';
-import { ModulesContainer } from './components/Modules';
-import SignersContainer from './components/Signers';
+import { ERC20TokenContainer } from './components/ERC20TokenContainer';
+import { ERC721TokensContainer } from './components/ERC721TokensContainer';
+import { MetadataContainer } from './components/MetadataContainer';
+import { ModulesContainer } from './components/ModulesContainer';
+import { SignersContainer } from './components/Signers/SignersContainer';
 
-export function Settings() {
+export function DAOSettingsContent() {
   const {
     node: { safe },
     governance: { type },
@@ -28,7 +28,10 @@ export function Settings() {
   }
 
   return (
-    <>
+    <Flex
+      flexDir="column"
+      gap="3rem"
+    >
       {type === GovernanceType.AZORIUS_ERC20 ? (
         <ERC20TokenContainer />
       ) : type === GovernanceType.AZORIUS_ERC721 ? (
@@ -36,18 +39,8 @@ export function Settings() {
       ) : type === GovernanceType.MULTISIG ? (
         <SignersContainer />
       ) : null}
-      <Divider
-        color="chocolate.700"
-        mt={10}
-        mb={10}
-      />
       <ModulesContainer />
-      <Divider
-        color="chocolate.700"
-        mt={10}
-        mb={10}
-      />
       <MetadataContainer />
-    </>
+    </Flex>
   );
 }
diff --git a/src/components/pages/DaoSettings/components/ERC20Token/index.tsx b/src/components/pages/DaoSettings/components/ERC20TokenContainer.tsx
similarity index 52%
rename from src/components/pages/DaoSettings/components/ERC20Token/index.tsx
rename to src/components/pages/DaoSettings/components/ERC20TokenContainer.tsx
index b3408cb9b2..2df9d465d8 100644
--- a/src/components/pages/DaoSettings/components/ERC20Token/index.tsx
+++ b/src/components/pages/DaoSettings/components/ERC20TokenContainer.tsx
@@ -1,13 +1,13 @@
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { SettingsSection } from '..';
-import { useFractal } from '../../../../../providers/App/AppProvider';
-import { AzoriusGovernance } from '../../../../../types';
-import { formatCoin } from '../../../../../utils';
-import { DisplayAddress } from '../../../../ui/links/DisplayAddress';
-import { BarLoader } from '../../../../ui/loaders/BarLoader';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import { AzoriusGovernance } from '../../../../types';
+import { formatCoin } from '../../../../utils';
+import { DisplayAddress } from '../../../ui/links/DisplayAddress';
+import { BarLoader } from '../../../ui/loaders/BarLoader';
+import { SettingsSection } from './SettingsSection';
 
-export default function ERC20TokenContainer() {
+export function ERC20TokenContainer() {
   const { t } = useTranslation(['settings']);
   const { governance } = useFractal();
 
@@ -16,53 +16,49 @@ export default function ERC20TokenContainer() {
 
   return (
     <SettingsSection
-      contentTitle={t('governanceTokenTitle')}
-      descriptionTitle={t('governanceTokenTitle')}
-      descriptionText={t('governanceTokenDescription')}
+      title={t('governanceTokenTitle')}
+      descriptionHeader={t('governanceTokenTitle')}
+      descriptionContent={t('governanceTokenDescription')}
     >
       {votesToken ? (
         <Flex
           justifyContent="space-between"
+          flexWrap={{ base: 'wrap', md: 'nowrap' }}
           mt={4}
         >
-          <Box>
+          {/* TOKEN NAME */}
+          <Box w={{ base: 'full', sm: 'auto' }}>
             <Text
-              textStyle="text-sm-mono-regular"
-              color="chocolate.200"
+              color="neutral-7"
+              textStyle="label-small"
             >
               {t('governanceTokenNameLabel')}
             </Text>
-            <Box mt={2}>
+            <Flex mt="0.5rem">
               <DisplayAddress address={votesToken.address}>{votesToken.name}</DisplayAddress>
-            </Box>
+            </Flex>
           </Box>
-          <Box>
+
+          {/* TOKEN SYMBOL */}
+          <Box w={{ base: 'full', sm: 'auto' }}>
             <Text
-              textStyle="text-sm-mono-regular"
-              color="chocolate.200"
+              color="neutral-7"
+              textStyle="label-small"
             >
               {t('governanceTokenSymbolLabel')}
             </Text>
-            <Text
-              textStyle="text-base-sans-regular"
-              color="grayscale.100"
-              mt={2}
-            >
-              {votesToken.symbol}
-            </Text>
+            <Text mt="0.5rem">{votesToken.symbol}</Text>
           </Box>
-          <Box>
+
+          {/* TOTAL SUPPLY */}
+          <Box w={{ base: 'full', sm: 'auto' }}>
             <Text
-              textStyle="text-sm-mono-regular"
-              color="chocolate.200"
+              color="neutral-7"
+              textStyle="label-small"
             >
               {t('governanceTokenSupplyLabel')}
             </Text>
-            <Text
-              textStyle="text-base-sans-regular"
-              color="grayscale.100"
-              mt={2}
-            >
+            <Text mt="0.5rem">
               {formatCoin(
                 votesToken.totalSupply,
                 false,
diff --git a/src/components/pages/DaoSettings/components/ERC721Token/index.tsx b/src/components/pages/DaoSettings/components/ERC721TokensContainer.tsx
similarity index 54%
rename from src/components/pages/DaoSettings/components/ERC721Token/index.tsx
rename to src/components/pages/DaoSettings/components/ERC721TokensContainer.tsx
index f71ee7e9c0..48c64f3091 100644
--- a/src/components/pages/DaoSettings/components/ERC721Token/index.tsx
+++ b/src/components/pages/DaoSettings/components/ERC721TokensContainer.tsx
@@ -1,12 +1,12 @@
 import { Flex, Text, Grid, GridItem } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { SettingsSection } from '..';
-import { useFractal } from '../../../../../providers/App/AppProvider';
-import { AzoriusGovernance } from '../../../../../types';
-import { DisplayAddress } from '../../../../ui/links/DisplayAddress';
-import { BarLoader } from '../../../../ui/loaders/BarLoader';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import { AzoriusGovernance } from '../../../../types';
+import { DisplayAddress } from '../../../ui/links/DisplayAddress';
+import { BarLoader } from '../../../ui/loaders/BarLoader';
+import { SettingsSection } from './SettingsSection';
 
-export default function ERC721TokensContainer() {
+export function ERC721TokensContainer() {
   const { t } = useTranslation(['settings']);
   const { governance } = useFractal();
 
@@ -15,81 +15,75 @@ export default function ERC721TokensContainer() {
 
   return (
     <SettingsSection
-      contentTitle={t('governanceERC721TokenTitle')}
-      descriptionTitle={t('governanceERC721TokenTitle')}
-      descriptionText={t('governanceERC721TokenDescription')}
+      title={t('governanceERC721TokenTitle')}
+      descriptionHeader={t('governanceERC721TokenTitle')}
+      descriptionContent={t('governanceERC721TokenDescription')}
     >
       {erc721Tokens ? (
         <Flex flexWrap="wrap">
           <Grid
-            templateColumns="repeat(5, 1fr)"
+            templateColumns={{ base: 'repeat(1, 1fr)', lg: 'repeat(5, 1fr)' }}
             width="100%"
-            mt={4}
           >
-            <GridItem colSpan={2}>
+            {/* HEADER TITLES */}
+            <GridItem colSpan={{ base: 1, lg: 2 }}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenNameLabel')}
               </Text>
             </GridItem>
             <GridItem colSpan={1}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenSymbolLabel')}
               </Text>
             </GridItem>
             <GridItem colSpan={1}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenWeightLabel')}
               </Text>
             </GridItem>
             <GridItem colSpan={1}>
               <Text
-                textStyle="text-sm-mono-regular"
-                color="chocolate.200"
+                textStyle="label-small"
+                color="neutral-7"
               >
                 {t('governanceTokenTotalWeightLabel')}
               </Text>
             </GridItem>
           </Grid>
+
+          {/* TOKEN DETAILS */}
           {erc721Tokens.map(token => (
             <Grid
               key={token.address}
               width="100%"
               templateColumns="repeat(5, 1fr)"
-              mt={2}
+              mt="0.5rem"
             >
               <GridItem colSpan={2}>
-                <DisplayAddress address={token.address}>{token.name}</DisplayAddress>
+                <Flex>
+                  <DisplayAddress address={token.address}>{token.name}</DisplayAddress>
+                </Flex>
               </GridItem>
+
               <GridItem colSpan={1}>
-                <Text
-                  textStyle="text-base-sans-regular"
-                  color="grayscale.100"
-                >
-                  {token.symbol}
-                </Text>
+                <Text>{token.symbol}</Text>
               </GridItem>
+
               <GridItem colSpan={1}>
-                <Text
-                  textStyle="text-base-sans-regular"
-                  color="grayscale.100"
-                >
-                  {token.votingWeight.toString()}
-                </Text>
+                <Text>{token.votingWeight.toString()}</Text>
               </GridItem>
+
               <GridItem colSpan={1}>
-                <Text
-                  textStyle="text-base-sans-regular"
-                  color="grayscale.100"
-                >
+                <Text>
                   {token.totalSupply ? (token.totalSupply * token.votingWeight).toString() : 'n/a'}
                 </Text>
               </GridItem>
diff --git a/src/components/pages/DaoSettings/components/Metadata/index.tsx b/src/components/pages/DaoSettings/components/MetadataContainer.tsx
similarity index 64%
rename from src/components/pages/DaoSettings/components/Metadata/index.tsx
rename to src/components/pages/DaoSettings/components/MetadataContainer.tsx
index 42d6470950..2c41350eea 100644
--- a/src/components/pages/DaoSettings/components/Metadata/index.tsx
+++ b/src/components/pages/DaoSettings/components/MetadataContainer.tsx
@@ -1,20 +1,20 @@
 import { ens_normalize } from '@adraffy/ens-normalize';
-import { Flex, Text, Button, Divider } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 import { useState, useEffect, ChangeEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { isHex, getAddress } from 'viem';
-import { SettingsSection } from '..';
-import { DAO_ROUTES } from '../../../../../constants/routes';
-import useSubmitProposal from '../../../../../hooks/DAO/proposal/useSubmitProposal';
-import { useCanUserCreateProposal } from '../../../../../hooks/utils/useCanUserSubmitProposal';
-import { createAccountSubstring } from '../../../../../hooks/utils/useDisplayName';
-import { useFractal } from '../../../../../providers/App/AppProvider';
-import { useNetworkConfig } from '../../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { ProposalExecuteData } from '../../../../../types';
-import { InputComponent } from '../../../../ui/forms/InputComponent';
+import { DAO_ROUTES } from '../../../../constants/routes';
+import useSubmitProposal from '../../../../hooks/DAO/proposal/useSubmitProposal';
+import { useCanUserCreateProposal } from '../../../../hooks/utils/useCanUserSubmitProposal';
+import { createAccountSubstring } from '../../../../hooks/utils/useDisplayName';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { ProposalExecuteData } from '../../../../types';
+import { InputComponent } from '../../../ui/forms/InputComponent';
+import { SettingsSection } from './SettingsSection';
 
-export default function MetadataContainer() {
+export function MetadataContainer() {
   const [name, setName] = useState('');
   const [snapshotENS, setSnapshotENS] = useState('');
   const [snapshotENSValid, setSnapshotENSValid] = useState<boolean>();
@@ -128,83 +128,61 @@ export default function MetadataContainer() {
 
   return (
     <SettingsSection
-      contentTitle={''}
-      contentHeader={
-        <Flex
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Text
-            textStyle="text-lg-mono-bold"
-            color="grayscale.100"
+      title={t('daoMetadataName')}
+      headerRight={
+        canUserCreateProposal && (
+          <Button
+            variant="secondary"
+            size="sm"
+            isDisabled={name === daoName}
+            onClick={handleEditDAOName}
           >
-            {t('daoMetadataName')}
-          </Text>
-          {canUserCreateProposal && (
-            <Button
-              variant="tertiary"
-              disabled={name === daoName}
-              isDisabled={name === daoName}
-              onClick={handleEditDAOName}
-            >
-              {t('proposeChanges')}
-            </Button>
-          )}
-        </Flex>
+            {t('proposeChanges')}
+          </Button>
+        )
       }
-      descriptionTitle={t('daoMetadataDescriptionTitle')}
-      descriptionText={t('daoMetadataDescriptionText')}
-    >
-      <InputComponent
-        isRequired={false}
-        onChange={e => setName(e.target.value)}
-        disabled={!userHasVotingWeight}
-        value={name}
-        placeholder="Amazing DAO"
-        testId="daoSettings.name"
-        gridContainerProps={{
-          display: 'inline-flex',
-          flexWrap: 'wrap',
-          flex: '1',
-          width: '100%',
-        }}
-        inputContainerProps={{
-          width: '100%',
-        }}
-      />
-      <Divider
-        color="chocolate.400"
-        mt={4}
-        mb={4}
-      />
-      <Flex
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text
-          textStyle="text-lg-mono-bold"
-          color="grayscale.100"
-        >
-          {t('daoMetadataSnapshot')}
-        </Text>
-        {canUserCreateProposal && (
+      descriptionHeader={t('daoMetadataDescriptionTitle')}
+      descriptionContent={t('daoMetadataDescriptionText')}
+      nestedSection={{
+        title: t('daoMetadataSnapshot'),
+        headerRight: canUserCreateProposal && (
           <Button
-            variant="tertiary"
-            disabled={!snapshotENSValid || snapshotENS === daoSnapshotENS}
+            variant="secondary"
+            size="sm"
             isDisabled={!snapshotENSValid || snapshotENS === daoSnapshotENS}
             onClick={handleEditDAOSnapshotENS}
           >
             {t('proposeChanges')}
           </Button>
-        )}
-      </Flex>
+        ),
+        children: (
+          <InputComponent
+            isRequired={false}
+            onChange={handleSnapshotENSChange}
+            value={snapshotENS}
+            disabled={!userHasVotingWeight}
+            placeholder="example.eth"
+            testId="daoSettings.snapshotENS"
+            gridContainerProps={{
+              display: 'inline-flex',
+              flexWrap: 'wrap',
+              flex: '1',
+              width: '100%',
+            }}
+            inputContainerProps={{
+              width: '100%',
+            }}
+          />
+        ),
+      }}
+    >
       <InputComponent
         isRequired={false}
-        onChange={handleSnapshotENSChange}
-        value={snapshotENS}
+        onChange={e => setName(e.target.value)}
         disabled={!userHasVotingWeight}
-        placeholder="example.eth"
-        testId="daoSettings.snapshotENS"
+        value={name}
+        placeholder="Amazing DAO"
+        testId="daoSettings.name"
         gridContainerProps={{
           display: 'inline-flex',
           flexWrap: 'wrap',
diff --git a/src/components/pages/DaoSettings/components/Modules/index.tsx b/src/components/pages/DaoSettings/components/Modules/index.tsx
deleted file mode 100644
index 007bd0a719..0000000000
--- a/src/components/pages/DaoSettings/components/Modules/index.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Box, Flex, Text, Divider, Center } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import { zeroAddress } from 'viem';
-import { SettingsSection } from '..';
-import { useFractal } from '../../../../../providers/App/AppProvider';
-import { FractalModuleType } from '../../../../../types';
-import { DisplayAddress } from '../../../../ui/links/DisplayAddress';
-import { BarLoader } from '../../../../ui/loaders/BarLoader';
-
-function NoModuleAttached({ translationKey }: { translationKey: string }) {
-  const { t } = useTranslation('settings');
-
-  return (
-    <Center my={4}>
-      <Text
-        color="chocolate.200"
-        textStyle="text-lg-mono-bold"
-      >
-        {t(translationKey)}
-      </Text>
-    </Center>
-  );
-}
-
-export function ModulesContainer() {
-  const { t } = useTranslation(['settings']);
-  const {
-    node: { fractalModules, isModulesLoaded, safe },
-    guardContracts: { freezeGuardContractAddress, freezeVotingContractAddress },
-  } = useFractal();
-
-  return (
-    <SettingsSection
-      contentTitle={t('modulesTitle')}
-      descriptionTitle={t('modulesAndGuardsTitle')}
-      descriptionText={t('modulesAndGuardsDescription1')}
-      descriptionContent={
-        <>
-          <Text
-            textStyle="text-sm-sans-regular"
-            color="chocolate.200"
-            mt={2}
-          >
-            {t('modulesAndGuardsDescription1')}
-          </Text>
-          <Text
-            textStyle="text-sm-sans-regular"
-            color="chocolate.200"
-            mt={4}
-          >
-            {t('modulesAndGuardsDescription2')}
-          </Text>
-        </>
-      }
-    >
-      <Flex
-        flexDirection="column"
-        gap="1rem"
-        mt={4}
-      >
-        {isModulesLoaded ? (
-          fractalModules.length > 0 ? (
-            fractalModules.map(({ moduleAddress, moduleType }, i) => (
-              <Box
-                key={moduleAddress}
-                mt={1}
-                mb={i === 0 ? 1 : 4}
-              >
-                <DisplayAddress address={moduleAddress}>
-                  {moduleAddress}
-                  {moduleType === FractalModuleType.AZORIUS
-                    ? ' (Azorius Module)'
-                    : moduleType === FractalModuleType.FRACTAL
-                      ? ' (Fractal Module)'
-                      : ''}
-                </DisplayAddress>
-              </Box>
-            ))
-          ) : (
-            <NoModuleAttached translationKey="noModulesAttached" />
-          )
-        ) : (
-          <BarLoader />
-        )}
-        <Text textStyle="text-lg-mono-bold">{t('guardTitle')}</Text>
-        <Divider
-          color="chocolate.400"
-          mt={4}
-        />
-        {safe?.guard && safe?.guard !== zeroAddress ? (
-          <Box>
-            <DisplayAddress address={safe.guard}>
-              {safe.guard}
-              {!!freezeGuardContractAddress || !!freezeVotingContractAddress
-                ? ' (Freeze Guard)'
-                : ''}
-            </DisplayAddress>
-          </Box>
-        ) : (
-          <NoModuleAttached translationKey="noGuardAttached" />
-        )}
-      </Flex>
-    </SettingsSection>
-  );
-}
diff --git a/src/components/pages/DaoSettings/components/ModulesContainer.tsx b/src/components/pages/DaoSettings/components/ModulesContainer.tsx
new file mode 100644
index 0000000000..df288abc01
--- /dev/null
+++ b/src/components/pages/DaoSettings/components/ModulesContainer.tsx
@@ -0,0 +1,91 @@
+import { Flex, Text, Hide, Show } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { zeroAddress } from 'viem';
+import { createAccountSubstring } from '../../../../hooks/utils/useDisplayName';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import { FractalModuleType } from '../../../../types';
+import { DisplayAddress } from '../../../ui/links/DisplayAddress';
+import { BarLoader } from '../../../ui/loaders/BarLoader';
+import { SettingsSection } from './SettingsSection';
+
+function NoModuleAttached({ translationKey }: { translationKey: string }) {
+  const { t } = useTranslation('settings');
+
+  return <Text color="neutral-5">{t(translationKey)}</Text>;
+}
+
+export function ModulesContainer() {
+  const { t } = useTranslation(['settings']);
+  const {
+    node: { fractalModules, isModulesLoaded, safe },
+    guardContracts: { freezeGuardContractAddress, freezeVotingContractAddress },
+  } = useFractal();
+
+  return (
+    <SettingsSection
+      title={t('modulesTitle')}
+      descriptionHeader={t('modulesAndGuardsTitle')}
+      descriptionContent={
+        <>
+          <Text mt={2}>{t('modulesAndGuardsDescription1')}</Text>
+          <Text mt={4}>{t('modulesAndGuardsDescription2')}</Text>
+        </>
+      }
+      nestedSection={{
+        title: t('guardTitle'),
+        children:
+          safe?.guard && safe?.guard !== zeroAddress ? (
+            <Flex>
+              <DisplayAddress address={safe.guard}>
+                {safe.guard}
+                {!!freezeGuardContractAddress || !!freezeVotingContractAddress
+                  ? ' (Freeze Guard)'
+                  : ''}
+              </DisplayAddress>
+            </Flex>
+          ) : (
+            <NoModuleAttached translationKey="noGuardAttached" />
+          ),
+      }}
+    >
+      <Flex
+        flexDirection="column"
+        gap="1rem"
+        mt={4}
+      >
+        {isModulesLoaded ? (
+          fractalModules.length > 0 ? (
+            fractalModules.map(({ moduleAddress, moduleType }) => {
+              const moduleHelper =
+                moduleType === FractalModuleType.AZORIUS
+                  ? ' (Azorius Module)'
+                  : moduleType === FractalModuleType.FRACTAL
+                    ? ' (Fractal Module)' // TODO rename this after renaming and redeploying contracts
+                    : '';
+              return (
+                <Flex key={moduleAddress}>
+                  <DisplayAddress address={moduleAddress}>
+                    <Hide above="md">{createAccountSubstring(moduleAddress)}</Hide>
+                    <Show above="md">{moduleAddress}</Show>
+                    {moduleHelper && (
+                      <Text
+                        as="span"
+                        display="flex"
+                      >
+                        {moduleHelper}
+                      </Text>
+                    )}
+                  </DisplayAddress>
+                </Flex>
+              );
+            })
+          ) : (
+            <NoModuleAttached translationKey="noModulesAttached" />
+          )
+        ) : (
+          <BarLoader />
+        )}
+      </Flex>
+    </SettingsSection>
+  );
+}
diff --git a/src/components/pages/DaoSettings/components/SettingsSection.tsx b/src/components/pages/DaoSettings/components/SettingsSection.tsx
new file mode 100644
index 0000000000..9b8de3249f
--- /dev/null
+++ b/src/components/pages/DaoSettings/components/SettingsSection.tsx
@@ -0,0 +1,95 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { CONTENT_MAXW } from '../../../../constants/common';
+import { StyledBox } from '../../../ui/containers/StyledBox';
+import Divider from '../../../ui/utils/Divider';
+
+type NestedSettingsSectionProps = Omit<
+  SettingsSectionProps,
+  'nestedSection' | 'descriptionHeader' | 'descriptionContent'
+>;
+
+interface SettingsSectionProps {
+  title: string;
+  headerRight?: ReactNode;
+  descriptionHeader: ReactNode;
+  descriptionContent: ReactNode;
+  children: ReactNode;
+  nestedSection?: NestedSettingsSectionProps;
+}
+
+export function SettingsSection({
+  title,
+  headerRight,
+  descriptionHeader,
+  descriptionContent,
+  children,
+  nestedSection,
+}: SettingsSectionProps) {
+  return (
+    <Flex
+      gap="1.5rem"
+      flexWrap={{ base: 'wrap', md: 'nowrap' }}
+    >
+      {/* SETTINGS SECTION CONTENT */}
+      <StyledBox
+        maxH="fit-content"
+        minH="6.25rem"
+        minW={{ base: '100%', md: '65%' }}
+        maxW={CONTENT_MAXW}
+      >
+        {/* TITLE AND OPTIONAL RIGHT COMPONENT */}
+        <Flex justifyContent="space-between">
+          <Text textStyle="display-lg">{title}</Text>
+          {headerRight}
+        </Flex>
+        <Divider
+          my="1rem"
+          w={{ base: 'calc(100% + 1.5rem)', md: 'calc(100% + 3rem)' }}
+          mx={{ base: '-0.75rem', md: '-1.5rem' }}
+        />
+        {children}
+
+        {/* NESTED SETTINGS SECTION, for when a section has an extra header-content content */}
+        {nestedSection && (
+          <Flex
+            flexDir="column"
+            mt="2rem"
+          >
+            <Flex justifyContent="space-between">
+              <Text textStyle="display-lg">{nestedSection.title}</Text>
+              {nestedSection.headerRight}
+            </Flex>
+            <Divider
+              my="1rem"
+              w={{ base: 'calc(100% + 1.5rem)', md: 'calc(100% + 3rem)' }}
+              mx={{ base: '-0.75rem', md: '-1.5rem' }}
+            />
+            {nestedSection.children}
+          </Flex>
+        )}
+      </StyledBox>
+
+      {/* SETTINGS SECTION DESCRIPTION */}
+      <Flex
+        gap="0.5rem"
+        flexDir="column"
+        justifyContent="flex-start"
+      >
+        <Box
+          color="white-0"
+          textStyle="display-lg"
+        >
+          {descriptionHeader}
+        </Box>
+
+        <Box
+          color="neutral-7"
+          textStyle="body-base"
+        >
+          {descriptionContent}
+        </Box>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/components/pages/DaoSettings/components/Signers/index.tsx b/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx
similarity index 53%
rename from src/components/pages/DaoSettings/components/Signers/index.tsx
rename to src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx
index 4e823ad687..ea1f864115 100644
--- a/src/components/pages/DaoSettings/components/Signers/index.tsx
+++ b/src/components/pages/DaoSettings/components/Signers/SignersContainer.tsx
@@ -1,38 +1,56 @@
-import { Button, Flex, HStack, Radio, RadioGroup, Show, Text } from '@chakra-ui/react';
-import { AddPlus, Minus } from '@decent-org/fractal-ui';
+import { Button, Flex, HStack, Radio, RadioGroup, Show, Text, Hide } from '@chakra-ui/react';
+import { PlusCircle, MinusCircle } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAccount } from 'wagmi';
-import { SettingsSection } from '..';
 import { useFractal } from '../../../../../providers/App/AppProvider';
 import { DisplayAddress } from '../../../../ui/links/DisplayAddress';
 import { ModalType } from '../../../../ui/modals/ModalProvider';
 import { useFractalModal } from '../../../../ui/modals/useFractalModal';
+import { SettingsSection } from '../SettingsSection';
 
 function Signer({ signer, disabled }: { signer: string; disabled: boolean }) {
   return (
     <HStack
       key={signer}
-      my={3}
+      my="1rem"
     >
       {!disabled && (
         <Radio
           value={signer}
-          colorScheme="blackAlpha"
-          textColor="gold.500"
-          borderColor="gold.500"
-          size="md"
+          color="lilac--3"
+          bgColor="black-0"
+          _hover={{
+            color: 'lilac--4',
+          }}
+          _checked={{
+            bg: 'black-0',
+            color: 'lilac--3',
+            borderWidth: '6px',
+
+            _hover: {
+              color: 'lilac--4',
+            },
+          }}
         />
       )}
-      <DisplayAddress
-        address={signer}
-        truncate={false}
-      />
+      <Show above="md">
+        <DisplayAddress
+          address={signer}
+          truncate={false}
+        />
+      </Show>
+      <Hide above="md">
+        <DisplayAddress
+          address={signer}
+          truncate
+        />
+      </Hide>
     </HStack>
   );
 }
 
-export default function SignersContainer() {
+export function SignersContainer() {
   const {
     node: { safe },
   } = useFractal();
@@ -67,56 +85,41 @@ export default function SignersContainer() {
 
   return (
     <SettingsSection
-      contentTitle={''}
-      contentHeader={
-        <Flex justifyContent="space-between">
-          <Text
-            textStyle="text-lg-mono-bold"
-            color="grayscale.100"
-          >
-            {t('signers', { ns: 'common' })}
-          </Text>
-          {userIsSigner && (
-            <Flex gap={4}>
-              <Button
-                minW={0}
-                px={2}
-                onClick={addSigner}
-              >
-                <AddPlus />
-                <Show above="sm">{t('add')}</Show>
-              </Button>
-              <Button
-                minW={0}
-                px={2}
-                onClick={removeSigner}
-                disabled={removeButtonDisabled}
-                isDisabled={removeButtonDisabled}
-                variant="tertiary"
-              >
-                <Minus />
-                <Show above="sm">{t('remove')}</Show>
-              </Button>
-            </Flex>
-          )}
-        </Flex>
+      title={t('signers', { ns: 'common' })}
+      headerRight={
+        userIsSigner && (
+          <Flex gap="0.5rem">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={addSigner}
+              leftIcon={<PlusCircle size="16" />}
+              iconSpacing="0"
+            >
+              <Show above="sm">
+                <Text>{t('add')}</Text>
+              </Show>
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={removeSigner}
+              isDisabled={removeButtonDisabled}
+              iconSpacing="0"
+              leftIcon={<MinusCircle size="16" />}
+            >
+              <Show above="sm">{t('remove')}</Show>
+            </Button>
+          </Flex>
+        )
       }
-      descriptionTitle={t('signersRequired', { ns: 'common' })}
       descriptionHeader={
         <Flex justifyContent="space-between">
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {t('signersRequired', { ns: 'common' })}
-          </Text>
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >{`${safe?.threshold}/${safe?.owners.length}`}</Text>
+          <Text>{t('signersRequired', { ns: 'common' })}</Text>
+          <Text>{`${safe?.threshold}/${safe?.owners.length}`}</Text>
         </Flex>
       }
-      descriptionText={t('signersDescription')}
+      descriptionContent={t('signersDescription')}
     >
       <RadioGroup
         onChange={e => setSelectedSigner(e)}
diff --git a/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx b/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx
index da76e39201..10c99ad062 100644
--- a/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx
+++ b/src/components/pages/DaoSettings/components/Signers/modals/AddSignerModal.tsx
@@ -1,16 +1,6 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Flex,
-  HStack,
-  Select,
-  Text,
-  Alert,
-  AlertTitle,
-  Image,
-} from '@chakra-ui/react';
+import { Box, Button, Flex, HStack, Select, Text, Icon } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
+import { WarningCircle } from '@phosphor-icons/react';
 import { Field, FieldAttributes, Formik } from 'formik';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,6 +12,7 @@ import { couldBeENS } from '../../../../../../utils/url';
 import SupportTooltip from '../../../../../ui/badges/SupportTooltip';
 import { CustomNonceInput } from '../../../../../ui/forms/CustomNonceInput';
 import { AddressInput } from '../../../../../ui/forms/EthAddressInput';
+import Divider from '../../../../../ui/utils/Divider';
 import useAddSigner from '../hooks/useAddSigner';
 
 function AddSignerModal({
@@ -86,14 +77,10 @@ function AddSignerModal({
         {({ handleSubmit, errors, values, setFieldValue }) => {
           return (
             <form onSubmit={handleSubmit}>
-              <Text
-                textStyle="text-base-sans-regular"
-                color="grayscale.100"
-              >
-                {t('addSignerLabel', { ns: 'modals' })}
-              </Text>
+              <Text>{t('addSignerLabel', { ns: 'modals' })}</Text>
               <Field name={'address'}>
                 {({ field }: FieldAttributes<any>) => (
+                  // LabelWrapper title styling needs to updated on @decent-org/fractal-ui, it seems
                   <LabelWrapper
                     subLabel={t('addSignerSublabel', { ns: 'modals' })}
                     errorMessage={field.value && errors.address}
@@ -105,18 +92,13 @@ function AddSignerModal({
               <Divider
                 mt={6}
                 mb={4}
-                color="chocolate.700"
               />
               <HStack>
-                <Text
-                  textStyle="text-base-sans-regular"
-                  color="grayscale.100"
-                >
-                  {t('updateThreshold', { ns: 'modals' })}
-                </Text>
+                <Text>{t('updateThreshold', { ns: 'modals' })}</Text>
                 <Flex ref={tooltipContainer}>
                   <SupportTooltip
                     containerRef={tooltipContainer}
+                    color="lilac-0"
                     label={t('updateSignersTooltip')}
                     mx="2"
                     mt="1"
@@ -128,8 +110,8 @@ function AddSignerModal({
                   onChange={e => setFieldValue('threshold', Number(e.target.value))}
                   mt={4}
                   width="8rem"
-                  bgColor="#2c2c2c"
-                  borderColor="#4d4d4d"
+                  bgColor="neutral-1"
+                  borderColor="neutral-3"
                   rounded="sm"
                   cursor="pointer"
                 >
@@ -144,8 +126,6 @@ function AddSignerModal({
                 </Select>
                 <Flex>
                   <Text
-                    textStyle="text-sm-mono-regular"
-                    color="grayscale.100"
                     mt={3}
                     ml={2}
                   >{`${t('signersRequired1', { ns: 'modals' })} ${signers.length + 1} ${t(
@@ -154,34 +134,33 @@ function AddSignerModal({
                   )}`}</Text>
                 </Flex>
               </HStack>
-              <Alert
-                status="info"
+
+              <Flex
                 w="fit-full"
                 mt={6}
+                p="1rem"
+                border="1px"
+                borderColor="yellow--1"
+                bg="yellow--2"
+                borderRadius="0.25rem"
+                alignItems="center"
+                gap="1rem"
               >
-                <Image
-                  src="/images/alert-triangle.svg"
-                  alt="alert triangle"
-                  w="1.5rem"
-                  h="1.5rem"
-                  ml={3}
-                  mr={3}
-                  textColor="blue.500"
+                <Icon
+                  color="yellow-0"
+                  as={WarningCircle}
+                  boxSize="1.5rem"
                 />
-                <AlertTitle>
-                  <Text
-                    textStyle="text-sm-mono-regular"
-                    whiteSpace="pre-wrap"
-                  >
-                    {t('updateSignerWarning', { ns: 'modals' })}
-                  </Text>
-                </AlertTitle>
-              </Alert>
-              <Divider
-                color="chocolate.700"
-                mt={6}
-                mb={6}
-              />
+                <Text
+                  color="yellow-0"
+                  textStyle="body-base-strong"
+                  whiteSpace="pre-wrap"
+                >
+                  {t('updateSignerWarning', { ns: 'modals' })}
+                </Text>
+              </Flex>
+
+              <Divider my={6} />
               <CustomNonceInput
                 nonce={values.nonce}
                 onChange={newNonce => setFieldValue('nonce', newNonce ? newNonce : undefined)}
diff --git a/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx b/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx
index 77352af879..8d04c6ae6d 100644
--- a/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx
+++ b/src/components/pages/DaoSettings/components/Signers/modals/RemoveSignerModal.tsx
@@ -1,15 +1,5 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Flex,
-  HStack,
-  Select,
-  Text,
-  Image,
-  AlertTitle,
-  Alert,
-} from '@chakra-ui/react';
+import { Box, Button, Flex, HStack, Select, Text, Icon } from '@chakra-ui/react';
+import { WarningDiamond, WarningCircle } from '@phosphor-icons/react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Address } from 'viem';
@@ -18,6 +8,7 @@ import { useFractal } from '../../../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../../../providers/NetworkConfig/NetworkConfigProvider';
 import SupportTooltip from '../../../../../ui/badges/SupportTooltip';
 import { CustomNonceInput } from '../../../../../ui/forms/CustomNonceInput';
+import Divider from '../../../../../ui/utils/Divider';
 import useRemoveSigner from '../hooks/useRemoveSigner';
 
 function RemoveSignerModal({
@@ -72,51 +63,59 @@ function RemoveSignerModal({
 
   return (
     <Box>
+      <Text textStyle="label-base">{t('removeSignerLabel', { ns: 'modals' })}</Text>
+
       <Text
-        textStyle="text-base-sans-regular"
-        color="grayscale.100"
-      >
-        {t('removeSignerLabel', { ns: 'modals' })}
-      </Text>
-      <Text
-        color="grayscale.600"
-        textStyle="text-base-mono-regular"
-        bgColor="black.500"
-        px={4}
-        py={2}
-        mt={2}
+        border="1px"
+        borderColor="red-0"
+        color="red-0"
+        bgColor="red--3"
+        px="1rem"
+        py="0.5rem"
+        my="0.5rem"
         rounded="sm"
       >
         {ensName ? ensName : selectedSigner}
       </Text>
+
+      <HStack>
+        <Icon
+          weight="fill"
+          as={WarningDiamond}
+          color="red-0"
+        />
+        <Text
+          textStyle="helper-text-base"
+          color="red-0"
+        >
+          {t('removeSignerWarning', { ns: 'modals' })}
+        </Text>
+      </HStack>
+
       <Divider
         mt={5}
         mb={4}
-        borderColor="chocolate.700"
       />
       <HStack>
-        <Text
-          textStyle="text-base-sans-regular"
-          color="grayscale.100"
-        >
-          {t('updateThreshold', { ns: 'modals' })}
-        </Text>
+        <Text>{t('updateThreshold', { ns: 'modals' })}</Text>
         <Flex ref={tooltipContainer}>
           <SupportTooltip
             containerRef={tooltipContainer}
             label={t('updateSignersTooltip')}
+            color="lilac-0"
             mx="2"
             mt="1"
           />
         </Flex>
       </HStack>
+
       <HStack>
         <Select
           onChange={e => setThreshold(Number(e.target.value))}
           mt={4}
           width="8rem"
-          bgColor="#2c2c2c"
-          borderColor="#4d4d4d"
+          bgColor="neutral-1"
+          borderColor="neutral-3"
           rounded="sm"
           cursor="pointer"
         >
@@ -131,8 +130,6 @@ function RemoveSignerModal({
         </Select>
         <Flex>
           <Text
-            textStyle="text-sm-mono-regular"
-            color="grayscale.100"
             mt={3}
             ml={2}
           >{`${t('signersRequired1', { ns: 'modals' })} ${signers.length - 1} ${t(
@@ -141,31 +138,31 @@ function RemoveSignerModal({
           )}`}</Text>
         </Flex>
       </HStack>
-      <Alert
-        status="info"
+      <Flex
         w="fit-full"
         mt={6}
+        p="1rem"
+        border="1px"
+        borderColor="yellow--1"
+        bg="yellow--2"
+        borderRadius="0.25rem"
+        alignItems="center"
+        gap="1rem"
       >
-        <Image
-          src="/images/alert-triangle.svg"
-          alt="alert triangle"
-          w="1.5rem"
-          h="1.5rem"
-          ml={3}
-          mr={3}
-          textColor="blue.500"
+        <Icon
+          color="yellow-0"
+          as={WarningCircle}
+          boxSize="1.5rem"
         />
-        <AlertTitle>
-          <Text
-            textStyle="text-sm-mono-regular"
-            whiteSpace="pre-wrap"
-          >
-            {t('updateSignerWarning', { ns: 'modals' })}
-          </Text>
-        </AlertTitle>
-      </Alert>
+        <Text
+          color="yellow-0"
+          textStyle="body-base-strong"
+          whiteSpace="pre-wrap"
+        >
+          {t('updateSignerWarning', { ns: 'modals' })}
+        </Text>
+      </Flex>
       <Divider
-        color="chocolate.700"
         mt={6}
         mb={6}
       />
diff --git a/src/components/pages/DaoSettings/components/index.tsx b/src/components/pages/DaoSettings/components/index.tsx
deleted file mode 100644
index 27c73bb252..0000000000
--- a/src/components/pages/DaoSettings/components/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Flex, Text, Divider } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-import { StyledBox } from '../../../ui/containers/StyledBox';
-
-interface ISettingsSection {
-  contentTitle: string;
-  contentHeader?: ReactNode;
-  descriptionTitle: string;
-  descriptionHeader?: ReactNode;
-  descriptionText: string;
-  descriptionContent?: ReactNode;
-  children: ReactNode;
-}
-
-export function SettingsSection({
-  descriptionHeader,
-  descriptionText,
-  descriptionContent,
-  descriptionTitle,
-  contentTitle,
-  contentHeader,
-  children,
-}: ISettingsSection) {
-  return (
-    <Flex
-      gap={4}
-      alignItems="flex-start"
-    >
-      <StyledBox
-        maxHeight="fit-content"
-        minHeight="6.25rem"
-        minWidth="65%"
-      >
-        {contentHeader || <Text textStyle="text-lg-mono-bold">{contentTitle}</Text>}
-        <Divider
-          marginTop="1rem"
-          color="chocolate.400"
-        />
-        {children}
-      </StyledBox>
-      <StyledBox
-        maxHeight="fit-content"
-        minHeight="6.25rem"
-      >
-        {descriptionHeader || (
-          <Text
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-          >
-            {descriptionTitle}
-          </Text>
-        )}
-        {descriptionContent || (
-          <Text
-            textStyle="text-sm-sans-regular"
-            color="chocolate.200"
-            mt={2}
-          >
-            {descriptionText}
-          </Text>
-        )}
-      </StyledBox>
-    </Flex>
-  );
-}
diff --git a/src/components/ui/badges/Badge.tsx b/src/components/ui/badges/Badge.tsx
index db5f21f4d4..bfd0fbcc83 100644
--- a/src/components/ui/badges/Badge.tsx
+++ b/src/components/ui/badges/Badge.tsx
@@ -1,145 +1,116 @@
 import { Box, Flex, Text, Tooltip } from '@chakra-ui/react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TOOLTIP_MAXW } from '../../../constants/common';
-import { FractalProposalState, DAOState, FractalProposal } from '../../../types';
-import { ProposalCountdown } from '../proposal/ProposalCountdown';
+import { FractalProposalState, DAOState } from '../../../types';
 
 type BadgeType = {
-  [key: string]: {
-    tooltipKey?: string;
-    bg: string;
-    _hover: { bg: string; textColor: string };
-    textColor: string;
-  };
+  tooltipKey?: string;
+  bg: string;
+  _hover: { bg: string; textColor: string };
+  textColor: string;
 };
 
-const greenText = '#8BDA8B';
-const greenBG = '#0A320A';
-const greenHoverText = '#78D378';
-const greenHover = '#0E440E';
-
-const redText = '#FFB2B2';
-const redBG = '#640E0D';
-const redHoverText = '#FF9999';
-const redHover = '#4D0B0A';
-
-const sandBG = '#C18D5A';
-const sandHover = '#B97F46';
-const sandText = '#2C1A08';
-const sandHoverText = '#150D04  ';
-
-const grayBG = '#9A979D';
-const grayHover = '#8C8990';
-
-const freezeBG = '#A3B9EC';
-const freezeHover = '#8DA8E7';
-const freezeText = '#0D2356';
-const freezeHoverText = '#09193E';
-
-const frozenBG = '#09193E';
-const frozenText = '#D1DCF5';
-const frozenHoverText = '#BCCCF0';
-const frozenHover = '#17326E';
-
-const BADGE_MAPPING: BadgeType = {
+const BADGE_MAPPING: Record<FractalProposalState | DAOState | 'ownerApproved', BadgeType> = {
   [FractalProposalState.ACTIVE]: {
     tooltipKey: 'stateActiveTip',
-    bg: greenBG,
-    textColor: greenText,
-    _hover: { bg: greenHover, textColor: greenHoverText },
+    bg: 'lilac-0',
+    textColor: 'cosmic-nebula-0',
+    _hover: { bg: 'lilac--1', textColor: 'cosmic-nebula-0' },
   },
   [FractalProposalState.TIMELOCKED]: {
     tooltipKey: 'stateTimelockedTip',
-    bg: greenBG,
-    textColor: greenText,
-    _hover: { bg: greenHover, textColor: greenHoverText },
+    bg: 'neutral-8',
+    textColor: 'neutral-4',
+    _hover: { bg: 'neutral-7', textColor: 'neutral-4' },
   },
   [FractalProposalState.EXECUTED]: {
     tooltipKey: 'stateExecutedTip',
-    bg: greenBG,
-    textColor: greenText,
-    _hover: { bg: greenHover, textColor: greenHoverText },
+    bg: 'celery--5',
+    textColor: 'white-0',
+    _hover: { bg: 'celery--6', textColor: 'white-0' },
   },
   [FractalProposalState.EXECUTABLE]: {
     tooltipKey: 'stateExecutableTip',
-    bg: greenBG,
-    textColor: greenText,
-    _hover: { bg: greenHover, textColor: greenHoverText },
+    bg: 'celery--2',
+    textColor: 'black-0',
+    _hover: { bg: 'celery--3', textColor: 'black-0' },
   },
   [FractalProposalState.FAILED]: {
     tooltipKey: 'stateFailedTip',
-    bg: redBG,
-    textColor: redText,
-    _hover: { bg: redHover, textColor: redHoverText },
+    bg: 'red-0',
+    textColor: 'red-4',
+    _hover: { bg: 'red--1', textColor: 'red-4' },
   },
   [FractalProposalState.TIMELOCKABLE]: {
     tooltipKey: 'stateTimelockableTip',
-    bg: greenBG,
-    textColor: greenText,
-    _hover: { bg: greenHover, textColor: greenHoverText },
+    bg: 'lilac-0',
+    textColor: 'cosmic-nebula-0',
+    _hover: { bg: 'lilac--1', textColor: 'cosmic-nebula-0' },
   },
   [FractalProposalState.MODULE]: {
     tooltipKey: 'stateModuleTip',
-    bg: greenBG,
-    textColor: greenText,
-    _hover: { bg: greenHover, textColor: greenHoverText },
+    bg: 'lilac-0',
+    textColor: 'cosmic-nebula-0',
+    _hover: { bg: 'lilac--1', textColor: 'cosmic-nebula-0' },
   },
   [FractalProposalState.EXPIRED]: {
     tooltipKey: 'stateExpiredTip',
-    bg: redBG,
-    textColor: redText,
-    _hover: { bg: redHover, textColor: redHoverText },
+    bg: 'neutral-4',
+    textColor: 'neutral-7',
+    _hover: { bg: 'neutral-2', textColor: 'neutral-7' },
   },
   [FractalProposalState.REJECTED]: {
     tooltipKey: 'stateRejectedTip',
-    bg: redBG,
-    textColor: redText,
-    _hover: { bg: redHover, textColor: redHoverText },
+    bg: 'red-0',
+    textColor: 'red-4',
+    _hover: { bg: 'red--1', textColor: 'red-4' },
   },
   [FractalProposalState.PENDING]: {
     tooltipKey: 'statePendingTip',
-    bg: sandBG,
-    textColor: sandText,
-    _hover: { bg: sandHover, textColor: sandHoverText },
+    bg: 'yellow-0',
+    textColor: 'black-0',
+    _hover: { bg: 'yellow-0', textColor: 'yellow--2' },
   },
   [FractalProposalState.CLOSED]: {
     tooltipKey: 'stateClosedTip',
-    bg: grayBG,
-    textColor: '#000',
-    _hover: { bg: grayHover, textColor: '#000' },
+    bg: 'neutral-8',
+    textColor: 'neutral-4',
+    _hover: { bg: 'neutral-7', textColor: 'neutral-4' },
   },
   [DAOState.freezeInit]: {
     tooltipKey: 'stateFreezeInitTip',
-    bg: freezeBG,
-    textColor: freezeText,
-    _hover: { bg: freezeHover, textColor: freezeHoverText },
+    bg: 'blue-2',
+    textColor: 'blue-0',
+    _hover: { bg: 'blue-1', textColor: 'blue-0' },
   },
   [DAOState.frozen]: {
     tooltipKey: 'stateFrozenTip',
-    bg: frozenBG,
-    textColor: frozenText,
-    _hover: { bg: frozenHover, textColor: frozenHoverText },
+    bg: 'blue-1',
+    textColor: 'blue--1',
+    _hover: { bg: 'blue-2', textColor: 'blue--1' },
   },
   ownerApproved: {
-    bg: 'sand.700',
-    textColor: sandText,
-    _hover: { bg: sandBG, textColor: sandHoverText },
+    bg: 'neutral-4',
+    textColor: 'neutral-7',
+    _hover: { bg: 'neutral-2', textColor: 'neutral-7' },
   },
 };
 
-type BadgeSize = { [key: string]: { minWidth: string; height: string } };
-const BADGE_SIZES: BadgeSize = {
+type Size = 'sm' | 'base';
+type BadgeSize = { minWidth: string; height: string };
+const BADGE_SIZES: Record<Size, BadgeSize> = {
   sm: { minWidth: '5rem', height: '1.375rem' },
   base: { minWidth: '5.4375rem', height: '1.375rem' },
 };
 
 interface IBadge {
-  size: 'sm' | 'base';
-  labelKey: FractalProposalState | DAOState | string;
-  proposal?: FractalProposal;
+  size: Size;
+  labelKey: keyof typeof BADGE_MAPPING;
+  children?: ReactNode;
 }
 
-export function Badge({ labelKey, size, proposal }: IBadge) {
+export function Badge({ labelKey, children, size }: IBadge) {
   const { tooltipKey, ...colors } = BADGE_MAPPING[labelKey];
   const sizes = BADGE_SIZES[size];
 
@@ -169,19 +140,11 @@ export function Badge({ labelKey, size, proposal }: IBadge) {
           h="0.5rem"
         />
         <Text
-          textStyle="text-md-sans-regular"
+          textStyle="label-base"
           lineHeight="1"
         >
-          {t(labelKey)}
+          {children || t(labelKey)}
         </Text>
-        {proposal && (
-          <ProposalCountdown
-            proposal={proposal}
-            showIcon={false}
-            textColor={colors.textColor}
-            textStyle="text-md-sans-regular"
-          />
-        )}
       </Flex>
     </Tooltip>
   );
diff --git a/src/components/ui/badges/QuorumBadge.tsx b/src/components/ui/badges/QuorumBadge.tsx
index e13e21e307..9e7376e276 100644
--- a/src/components/ui/badges/QuorumBadge.tsx
+++ b/src/components/ui/badges/QuorumBadge.tsx
@@ -3,39 +3,35 @@ import { Check } from '@decent-org/fractal-ui';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../providers/App/AppProvider';
-import {
-  AzoriusGovernance,
-  AzoriusProposal,
-  FractalProposal,
-  SnapshotProposal,
-} from '../../../types';
+import { AzoriusGovernance, AzoriusProposal } from '../../../types';
 
-const quorumNotReachedColor = '#838383';
-const quorumReachedColor = '#56A355';
-export default function QuorumBadge({ proposal }: { proposal: FractalProposal }) {
+export default function QuorumBadge({ proposal }: { proposal: AzoriusProposal }) {
   const { governance } = useFractal();
   const { t } = useTranslation('common');
 
   const azoriusGovernance = governance as AzoriusGovernance;
   const { votesToken, erc721Tokens, votingStrategy } = azoriusGovernance;
 
-  const { votesSummary } = proposal as AzoriusProposal;
-  const totalVotesCasted = useMemo(() => {
-    if (votesSummary) {
-      return votesSummary.yes + votesSummary.no + votesSummary.abstain;
-    }
-    return 0n;
-  }, [votesSummary]);
+  const { votesSummary } = proposal;
+
+  const totalVotesCasted = votesSummary.yes + votesSummary.no + votesSummary.abstain;
 
   const votesTokenDecimalsDenominator = useMemo(
     () => 10n ** BigInt(votesToken?.decimals || 0),
     [votesToken?.decimals],
   );
 
-  // @dev only azorius governance has quorum
-  if ((proposal as SnapshotProposal).snapshotProposalId || !votingStrategy) {
-    return null;
-  }
+  const reachedQuorum = useMemo(() => {
+    if (erc721Tokens !== undefined) {
+      return totalVotesCasted - votesSummary.no;
+    }
+
+    if (votesToken !== undefined) {
+      return (totalVotesCasted - votesSummary.no) / votesTokenDecimalsDenominator;
+    }
+
+    return 0n;
+  }, [erc721Tokens, totalVotesCasted, votesSummary, votesToken, votesTokenDecimalsDenominator]);
 
   if (votesToken !== undefined && erc721Tokens !== undefined) {
     return null;
@@ -53,12 +49,7 @@ export default function QuorumBadge({ proposal }: { proposal: FractalProposal })
       : votesToken !== undefined
         ? votingStrategy.quorumPercentage!.value
         : 0n;
-  const reachedQuorum =
-    erc721Tokens !== undefined
-      ? totalVotesCasted - votesSummary.no
-      : votesToken !== undefined
-        ? (totalVotesCasted - votesSummary.no) / votesTokenDecimalsDenominator
-        : 0n;
+
   const totalQuorum = erc721Tokens !== undefined ? strategyQuorum : 0n;
 
   const meetsQuorum = votesToken
@@ -66,12 +57,11 @@ export default function QuorumBadge({ proposal }: { proposal: FractalProposal })
       reachedQuorum
     : reachedQuorum >= totalQuorum;
 
-  const displayColor =
-    totalVotesCasted !== 0n && meetsQuorum ? quorumReachedColor : quorumNotReachedColor;
+  const displayColor = totalVotesCasted !== 0n && meetsQuorum ? 'celery--3' : 'neutral-7';
   return (
     <Box
       rounded="md"
-      textStyle="text-md-sans-regular"
+      textStyle="label-base"
       borderColor={displayColor}
       textColor={displayColor}
       border="1px solid"
diff --git a/src/components/ui/badges/Snapshot.tsx b/src/components/ui/badges/Snapshot.tsx
index 124cb9f649..38743313ac 100644
--- a/src/components/ui/badges/Snapshot.tsx
+++ b/src/components/ui/badges/Snapshot.tsx
@@ -1,29 +1,48 @@
-import { Button, ButtonProps, Image, Link } from '@chakra-ui/react';
+/* eslint-disable react/function-component-definition */
+import { Button, ButtonProps, Icon, Link } from '@chakra-ui/react';
 import { t } from 'i18next';
 
 interface Props extends ButtonProps {
   snapshotENS: string;
 }
 
-export default function Snapshot({ snapshotENS, mt }: Props) {
+const SnapshotIconSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      d="M3.26362 10.5915L13.4401 1.77646C13.5535 1.66301 13.8825 1.67427 13.9846 1.77646C14.2091 2.00107 14.0527 2.34371 13.9846 2.45716L10.8194 8.65153H15.9927C16.5032 8.65153 16.8095 8.68557 16.8436 9.02592C16.8708 9.2982 16.7415 9.43434 16.6734 9.46837C13.4628 12.2479 6.98023 17.8614 6.73517 18.0792C6.42886 18.3515 6.08851 18.3856 5.8843 18.2494C5.72093 18.1405 5.81623 17.7956 5.8843 17.6368L8.98148 11.4084H3.91028C2.93008 11.4084 3.07075 10.8638 3.26362 10.5915Z"
+      fill="#DCC8F0"
+    />
+  </svg>
+);
+
+export const SnapshotIcon = () => <Icon as={SnapshotIconSVG} />;
+
+export function SnapshotButton({ snapshotENS }: Props) {
   return (
     <Button
-      href={`https://snapshot.org/#${snapshotENS}`}
+      href={`https://snapshot.org/#/${snapshotENS}`}
       as={Link}
       target="_blank"
-      variant="secondary"
-      mt={mt || 5}
-      h={6}
-      w={32}
+      variant="primary"
+      bg={'neutral-3'}
+      borderRadius="625rem"
+      color={'lilac-0'}
+      borderWidth="1px"
+      borderColor="transparent"
+      _hover={{ textDecoration: 'none', bg: 'neutral-4' }}
+      _active={{ bg: 'neutral-3', borderColor: 'neutral-4' }}
+      size={'sm'}
+      p={'0.25rem 0.75rem'}
+      width={'fit-content'}
     >
-      <>
-        <Image
-          src="/images/snapshot-icon.svg"
-          alt="snapshot icon"
-          mr={1}
-        />
-        {t('snapshot')}
-      </>
+      <SnapshotIcon />
+      {t('snapshot')}
     </Button>
   );
 }
diff --git a/src/components/ui/badges/StatusBox.tsx b/src/components/ui/badges/StatusBox.tsx
index d74d014c70..3d6d6022ef 100644
--- a/src/components/ui/badges/StatusBox.tsx
+++ b/src/components/ui/badges/StatusBox.tsx
@@ -5,13 +5,15 @@ export default function StatusBox({ children }: { children: ReactNode }) {
   return (
     <Box
       px="8px"
-      py="2px"
-      height="22px"
+      py="0"
+      height="24px"
       display="inline-flex"
       alignItems="center"
-      bg="sand.700"
       borderRadius="4px"
-      color="black"
+      color="neutral-7"
+      textStyle="label-base"
+      border="1px solid"
+      borderColor="neutral-7"
     >
       {children}
     </Box>
diff --git a/src/components/ui/badges/SupportTooltip.tsx b/src/components/ui/badges/SupportTooltip.tsx
index 2f695866c5..33dba46f9b 100644
--- a/src/components/ui/badges/SupportTooltip.tsx
+++ b/src/components/ui/badges/SupportTooltip.tsx
@@ -1,23 +1,25 @@
-import { Tooltip, TooltipProps } from '@chakra-ui/react';
-import { SupportQuestion } from '@decent-org/fractal-ui';
+import { Tooltip, TooltipProps, Icon } from '@chakra-ui/react';
+import { Icon as PhosphorIcon, Question } from '@phosphor-icons/react';
 import { RefObject } from 'react';
 import { TOOLTIP_MAXW } from '../../../constants/common';
 import ModalTooltip from '../modals/ModalTooltip';
 
 interface Props extends Omit<TooltipProps, 'children'> {
   containerRef?: RefObject<HTMLElement | null>;
+  IconComponent?: PhosphorIcon;
 }
 
 /**
  * Displays a circle in question mark, along with the provided tooltip, via
  * the 'label' Tooltip prop.
  */
-export default function SupportTooltip({ containerRef, ...rest }: Props) {
-  const question = (
-    <SupportQuestion
+export default function SupportTooltip({ containerRef, IconComponent, ...rest }: Props) {
+  const icon = (
+    <Icon
       boxSize="1.5rem"
       minWidth="auto"
       color={rest.color}
+      as={IconComponent || Question}
     />
   );
 
@@ -29,7 +31,7 @@ export default function SupportTooltip({ containerRef, ...rest }: Props) {
         placement="top"
         {...rest}
       >
-        {question}
+        {icon}
       </ModalTooltip>
     );
   }
@@ -41,7 +43,7 @@ export default function SupportTooltip({ containerRef, ...rest }: Props) {
       {...rest}
       color="white"
     >
-      {question}
+      {icon}
     </Tooltip>
   );
 }
diff --git a/src/components/ui/cards/DAOInfoCard.tsx b/src/components/ui/cards/DAOInfoCard.tsx
index 77bb3e2a63..ed10f407b8 100644
--- a/src/components/ui/cards/DAOInfoCard.tsx
+++ b/src/components/ui/cards/DAOInfoCard.tsx
@@ -1,50 +1,31 @@
-import { Box, Flex, Text, Spacer, HStack, FlexProps, Link, Center } from '@chakra-ui/react';
+import { Box, Flex, Text, Link, Center } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
-import { Address } from 'viem';
 import { DAO_ROUTES } from '../../../constants/routes';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { FreezeGuard, FractalGuardContracts, FractalNode } from '../../../types';
-import Snapshot from '../badges/Snapshot';
-import FavoriteIcon from '../icons/FavoriteIcon';
+import { SnapshotButton } from '../badges/Snapshot';
+import { FavoriteIcon } from '../icons/FavoriteIcon';
 import AddressCopier from '../links/AddressCopier';
 import { BarLoader } from '../loaders/BarLoader';
 import { ManageDAOMenu } from '../menus/ManageDAO/ManageDAOMenu';
 
-export interface InfoProps extends FlexProps {
-  parentAddress?: Address;
-  node?: FractalNode;
-  childCount?: number;
-  freezeGuard?: FreezeGuard;
-  guardContracts?: FractalGuardContracts;
-}
-
 /**
- * Info card used on both the DAO homepage, as well as each DAO in the
- * hierarchy page.
- *
- * It is *very* important to understand that all DAO info needs to be passed into
- * this component, as this card is independent of your current DAO context, since
- * it is used in the hierarchy, where there are multiple DAO nodes being displayed.
- *
- * Simply using the useFractal() hook to get info will end up with the current DAO's
- * context being displayed in ALL the node cards in a hierarchy, which is incorrect.
+ * Info card used on the DAO homepage.
  */
-export function DAOInfoCard({
-  parentAddress,
-  node,
-  childCount,
-  freezeGuard,
-  guardContracts,
-  ...rest
-}: InfoProps) {
+export function DAOInfoCard() {
   const {
-    node: { daoAddress: currentDAOAddress }, // used ONLY to determine if we're on the current DAO
-    action,
+    node,
+    guardContracts,
+    guard,
     readOnly: { user },
   } = useFractal();
+
+  const parentAddress = node.nodeHierarchy.parentAddress;
+  const childCount = node.nodeHierarchy.childNodes.length;
+
   const { addressPrefix } = useNetworkConfig();
+
   // for non Fractal Safes
   const { displayName } = useDisplayName(node?.daoAddress);
 
@@ -54,7 +35,6 @@ export function DAOInfoCard({
       <Flex
         w="full"
         minH="full"
-        {...rest}
       >
         <Center w="100%">
           <BarLoader />
@@ -64,83 +44,76 @@ export function DAOInfoCard({
   }
 
   const displayedAddress = node.daoAddress;
-  const isCurrentDAO = displayedAddress === currentDAOAddress;
 
   return (
-    <Flex
-      w="full"
-      minH="full"
-      {...rest}
-    >
+    <Box>
       <Flex
-        flexDirection="column"
-        gap="0.4rem"
+        direction="column"
+        gap="1.5rem"
       >
-        <HStack>
-          <Link
-            as={RouterLink}
-            pointerEvents={isCurrentDAO ? 'none' : undefined}
-            to={DAO_ROUTES.dao.relative(addressPrefix, displayedAddress)}
-            _hover={{ textDecoration: 'none' }}
-            onClick={() => {
-              // if we're not on the current DAO, reset
-              // the DAO data, so the one you're clicking
-              // into will load properly
-              if (!isCurrentDAO) {
-                action.resetDAO();
-              }
-            }}
+        {/* DAO NAME AND ACTIONS */}
+
+        <Flex
+          alignItems="flex-start"
+          columnGap="0.5rem"
+        >
+          {/* DAO NAME */}
+          <Text
+            textStyle="display-4xl"
+            data-testid="DAOInfo-name"
           >
-            <Text
-              as="h1"
-              textStyle="text-2xl-mono-regular"
-              color="grayscale.100"
-              data-testid="DAOInfo-name"
-              noOfLines={1}
-            >
-              {node.daoName || displayName}
-            </Text>
-          </Link>
-          <FavoriteIcon
-            safeAddress={displayedAddress}
-            data-testid="DAOInfo-favorite"
-          />
-          {childCount && childCount > 0 && (
-            <Link
-              to={DAO_ROUTES.hierarchy.relative(addressPrefix, displayedAddress)}
-              as={RouterLink}
+            {node.daoName || displayName}
+          </Text>
+
+          <Flex
+            alignItems="center"
+            columnGap="0.5rem"
+            justifyContent="space-between"
+            mt="0.5rem"
+            flexGrow={1}
+          >
+            <Flex
+              alignItems="center"
+              columnGap="0.5rem"
             >
-              <Box
-                bg="chocolate.500"
-                borderRadius="4px"
-                p="0.25rem 0.5rem"
-              >
-                <Text textStyle="text-sm-mono-semibold">{childCount}</Text>
-              </Box>
-            </Link>
-          )}
-        </HStack>
+              {/* FAVORITE ICON */}
+              <FavoriteIcon safeAddress={displayedAddress} />
+
+              {/* PARENT TAG */}
+              {!!childCount && childCount > 0 && (
+                <Link
+                  to={DAO_ROUTES.hierarchy.relative(addressPrefix, displayedAddress)}
+                  as={RouterLink}
+                  _hover={{ textDecoration: 'none', bg: 'neutral-4' }}
+                  _active={{ bg: 'neutral-3', borderColor: 'neutral-4' }}
+                  bg="neutral-3"
+                  color="lilac-0"
+                  borderRadius="625rem"
+                  p="0.25rem 0.75rem"
+                  textStyle="button-base"
+                >
+                  Parent
+                </Link>
+              )}
+            </Flex>
+            {/* SETTINGS MENU BUTTON */}
+            {!!user.address && (
+              <ManageDAOMenu
+                parentAddress={parentAddress}
+                fractalNode={node}
+                freezeGuard={guard}
+                guardContracts={guardContracts}
+              />
+            )}
+          </Flex>
+        </Flex>
+
+        {/* DAO ADDRESS */}
         <AddressCopier address={displayedAddress} />
+
+        {/* SNAPSHOT ICON LINK */}
+        {node.daoSnapshotENS && <SnapshotButton snapshotENS={node.daoSnapshotENS} />}
       </Flex>
-      <Spacer />
-      <Flex
-        flexDirection="column"
-        alignItems="end"
-        justifyContent="space-between"
-      >
-        {!!user.address ? (
-          <ManageDAOMenu
-            parentAddress={parentAddress}
-            fractalNode={node}
-            freezeGuard={freezeGuard}
-            guardContracts={guardContracts}
-          />
-        ) : (
-          // empty box to keep snapshot bottom aligned
-          <Box />
-        )}
-        {node.daoSnapshotENS && <Snapshot snapshotENS={node.daoSnapshotENS} />}
-      </Flex>
-    </Flex>
+    </Box>
   );
 }
diff --git a/src/components/ui/cards/DAONodeInfoCard.tsx b/src/components/ui/cards/DAONodeInfoCard.tsx
new file mode 100644
index 0000000000..107f50bc2d
--- /dev/null
+++ b/src/components/ui/cards/DAONodeInfoCard.tsx
@@ -0,0 +1,123 @@
+import { Flex, Text, FlexProps, Link, Center, VStack } from '@chakra-ui/react';
+import { Link as RouterLink } from 'react-router-dom';
+import { DAO_ROUTES } from '../../../constants/routes';
+import useDisplayName from '../../../hooks/utils/useDisplayName';
+import { useFractal } from '../../../providers/App/AppProvider';
+import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { FreezeGuard, FractalGuardContracts, FractalNode } from '../../../types';
+import { SnapshotButton } from '../badges/Snapshot';
+import { FavoriteIcon } from '../icons/FavoriteIcon';
+import AddressCopier from '../links/AddressCopier';
+import { BarLoader } from '../loaders/BarLoader';
+
+export const NODE_HEIGHT_REM = 6.75;
+export const NODE_MARGIN_TOP_REM = 1.25;
+
+export interface InfoProps extends FlexProps {
+  node?: FractalNode;
+  freezeGuard?: FreezeGuard;
+  guardContracts?: FractalGuardContracts;
+}
+
+/**
+ * Info card used on each DAO in the hierarchy page.
+ *
+ * It is *very* important to understand that all DAO info needs to be passed into
+ * this component, as this card is independent of your current DAO context, since
+ * it is used in the hierarchy, where there are multiple DAO nodes being displayed.
+ *
+ * Simply using the useFractal() hook to get info will end up with the current DAO's
+ * context being displayed in ALL the node cards in a hierarchy, which is incorrect.
+ */
+export function DAONodeInfoCard({ node, freezeGuard, guardContracts, ...rest }: InfoProps) {
+  const {
+    node: { daoAddress: currentDAOAddress }, // used ONLY to determine if we're on the current DAO
+    action,
+  } = useFractal();
+  const { addressPrefix } = useNetworkConfig();
+  // for non Fractal Safes
+  const { displayName } = useDisplayName(node?.daoAddress);
+
+  // node hasn't loaded yet
+  if (!node || !node.daoAddress) {
+    return (
+      <Flex
+        w="full"
+        minH="full"
+        {...rest}
+      >
+        <Center w="100%">
+          <BarLoader />
+        </Center>
+      </Flex>
+    );
+  }
+
+  const displayedAddress = node.daoAddress;
+  const isCurrentDAO = displayedAddress === currentDAOAddress;
+
+  return (
+    <Link
+      as={RouterLink}
+      to={DAO_ROUTES.dao.relative(addressPrefix, displayedAddress)}
+      _hover={{ textDecoration: 'none', cursor: isCurrentDAO ? 'default' : 'pointer' }}
+      onClick={event => {
+        if (isCurrentDAO) {
+          event.preventDefault();
+        } else {
+          // if we're not on the current DAO, reset
+          // the DAO data, so the one you're clicking
+          // into will load properly
+          // TODO is this needed here?
+          action.resetDAO();
+        }
+      }}
+    >
+      <Flex
+        minH={`${NODE_HEIGHT_REM}rem`}
+        bg="neutral-2"
+        _hover={
+          !isCurrentDAO
+            ? {
+                bg: 'neutral-3',
+                border: '1px solid',
+                borderColor: 'neutral-4',
+              }
+            : {}
+        }
+        p="1.5rem"
+        width="100%"
+        borderRadius="0.5rem"
+        border={isCurrentDAO ? '4px solid' : '1px'}
+        borderColor={isCurrentDAO ? 'neutral-4' : 'transparent'}
+      >
+        <VStack
+          gap="0.5rem"
+          alignItems="left"
+        >
+          {/* DAO NAME */}
+          <Flex
+            gap="0.5rem"
+            alignItems="center"
+          >
+            {/* DAO NAME */}
+
+            <Text textStyle="display-xl">{node.daoName || displayName}</Text>
+
+            {/* FAVORITE ICON */}
+            <FavoriteIcon
+              safeAddress={displayedAddress}
+              data-testid="DAOInfo-favorite"
+            />
+
+            {/* SNAPSHOT ICON LINK */}
+            {node.daoSnapshotENS && <SnapshotButton snapshotENS={node.daoSnapshotENS} />}
+          </Flex>
+
+          {/* DAO ADDRESS */}
+          <AddressCopier address={displayedAddress} />
+        </VStack>
+      </Flex>
+    </Link>
+  );
+}
diff --git a/src/components/ui/cards/DAONodeRow.tsx b/src/components/ui/cards/DAONodeRow.tsx
deleted file mode 100644
index 41a87292d8..0000000000
--- a/src/components/ui/cards/DAONodeRow.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
-import { useFractal } from '../../../providers/App/AppProvider';
-import { NodeLineHorizontal } from '../../pages/DaoHierarchy/NodeLines';
-import { DAOInfoCard, InfoProps } from './DAOInfoCard';
-
-interface Props extends InfoProps {
-  depth: number;
-}
-
-export const NODE_HEIGHT_REM = 6.75;
-export const NODE_MARGIN_TOP_REM = 1;
-
-/**
- * A DAO row within the DAO hierarchy, which displays the DAOInfoCard
- * and the horizontal line, as well as adding left margin to indent
- * the DAO info card, depending on the depth of the DAO.
- */
-export function DAONodeRow(props: Props) {
-  const {
-    node: { daoAddress: currentDAOAddress }, // used ONLY to determine if we're on the current DAO
-  } = useFractal();
-
-  const isCurrentDAO = props.node?.daoAddress === currentDAOAddress;
-  const border = isCurrentDAO ? { border: '1px solid', borderColor: 'drab.500' } : undefined;
-
-  return (
-    <Flex
-      minH={NODE_HEIGHT_REM + 'rem'}
-      mt={NODE_MARGIN_TOP_REM + 'rem'}
-      bg={BACKGROUND_SEMI_TRANSPARENT}
-      p="1rem"
-      borderRadius="0.5rem"
-      flex={1}
-      position="relative"
-      {...border}
-    >
-      <NodeLineHorizontal
-        isCurrentDAO={isCurrentDAO}
-        isFirstChild={props.depth === 0 && props.parentAddress !== currentDAOAddress}
-      />
-      <DAOInfoCard
-        parentAddress={props.parentAddress}
-        node={props.node}
-        freezeGuard={props.freezeGuard}
-        guardContracts={props.guardContracts}
-      />
-    </Flex>
-  );
-}
diff --git a/src/components/ui/containers/ActivityBox.tsx b/src/components/ui/containers/ActivityBox.tsx
index e7db23c8e1..856cc95d86 100644
--- a/src/components/ui/containers/ActivityBox.tsx
+++ b/src/components/ui/containers/ActivityBox.tsx
@@ -4,21 +4,25 @@ import { StyledBox } from './StyledBox';
 
 export function ActivityBox({
   children,
-  borderColor,
+  borderColor = 'transparent',
+  ...rest
 }: {
   children?: ReactNode;
   borderColor?: string;
 }) {
   return (
     <SlideFade
-      offsetY={'-100%'}
-      in={true}
+      offsetY="-100%"
+      in
     >
       <StyledBox
         maxHeight="fit-content"
         minHeight="6.25rem"
-        border={borderColor ? '1px' : undefined}
+        border="1px"
         borderColor={borderColor}
+        _hover={{ bg: 'neutral-3' }}
+        _active={{ bg: 'neutral-2', border: '1px solid', borderColor: 'neutral-3' }}
+        {...rest}
       >
         {children}
       </StyledBox>
diff --git a/src/components/ui/containers/ContentBanner.tsx b/src/components/ui/containers/ContentBanner.tsx
deleted file mode 100644
index 41a4538d67..0000000000
--- a/src/components/ui/containers/ContentBanner.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Flex, Text } from '@chakra-ui/react';
-import { Info } from '@decent-org/fractal-ui';
-
-interface ContentBannerProps {
-  description: string;
-}
-
-function ContentBanner({ description }: ContentBannerProps) {
-  return (
-    <Flex
-      alignItems="center"
-      bg="black.500"
-      borderTop="1px solid"
-      borderColor="sand.500"
-      my="2rem"
-      p="1rem"
-      color="grayscale.100"
-      textStyle="text-sm-sans-regular"
-      gap="2"
-    >
-      <Info boxSize="1.5rem" />
-      <Text>{description}</Text>
-    </Flex>
-  );
-}
-
-export default ContentBanner;
diff --git a/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx b/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx
index 0ff179b2ff..da8e80766a 100644
--- a/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx
+++ b/src/components/ui/containers/ContentBox/ContentBoxTitle.tsx
@@ -4,8 +4,8 @@ import { ReactNode } from 'react';
 function ContentBoxTitle({ children }: { children: ReactNode }) {
   return (
     <Text
-      textStyle="text-lg-mono-medium"
-      color="grayscale.100"
+      textStyle="display-lg"
+      color="white-0"
     >
       {children}
     </Text>
diff --git a/src/components/ui/containers/ContentBox/index.tsx b/src/components/ui/containers/ContentBox/index.tsx
index 61e24940bd..1a9f99a1d1 100644
--- a/src/components/ui/containers/ContentBox/index.tsx
+++ b/src/components/ui/containers/ContentBox/index.tsx
@@ -13,9 +13,9 @@ function ContentBox({ title, children, containerBoxProps, onClick }: ContentBoxP
   return (
     <Box
       rounded="lg"
-      p="1rem 1.5rem"
-      my="4"
-      bg="black.900"
+      p="1.5rem"
+      my="1.25rem"
+      bg="neutral-2"
       {...containerBoxProps}
       cursor={!!onClick ? 'pointer' : 'default'}
       onClick={onClick}
diff --git a/src/components/ui/containers/EmptyBox.tsx b/src/components/ui/containers/EmptyBox.tsx
index 5d56a22d74..2810a1c5ca 100644
--- a/src/components/ui/containers/EmptyBox.tsx
+++ b/src/components/ui/containers/EmptyBox.tsx
@@ -19,8 +19,8 @@ export function EmptyBox({
         flexWrap="wrap"
       >
         <Text
-          textStyle="text-xl-mono-bold"
-          color="chocolate.100"
+          textStyle="display-xl"
+          color="neutral-7"
         >
           {emptyText}
         </Text>
diff --git a/src/components/ui/containers/InfoBox.tsx b/src/components/ui/containers/InfoBox.tsx
index e4b2bdaa2d..d3cd3711a5 100644
--- a/src/components/ui/containers/InfoBox.tsx
+++ b/src/components/ui/containers/InfoBox.tsx
@@ -1,41 +1,14 @@
 import { Box, BoxProps } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
 
-type InfoBoxProps = {
-  minHeight?: string;
-  minWidth?: { [key: string]: string } | string;
-  m?: string | number;
-  to?: string;
-  background?: string;
-  children: ReactNode;
-} & BoxProps;
-
-export function InfoBox({
-  minWidth = '100%',
-  minHeight = '10.6rem',
-  children,
-  to,
-  background,
-  ...rest
-}: InfoBoxProps) {
-  const navigate = useNavigate();
+export function InfoBox({ children, ...rest }: BoxProps) {
   return (
     <Box
-      cursor={to ? 'pointer' : undefined}
-      onClick={
-        to
-          ? () => {
-              navigate(to);
-            }
-          : undefined
-      }
-      minWidth={minWidth}
       h="100%"
-      minHeight={minHeight}
-      bg={background || BACKGROUND_SEMI_TRANSPARENT}
-      p="1rem"
+      minHeight="10.6rem"
+      p="1.5rem"
+      mx="0.3rem"
+      borderWidth="0.06rem"
+      borderColor="neutral-3"
       borderRadius="0.5rem"
       {...rest}
     >
diff --git a/src/components/ui/containers/ProposalDetailsGrid.tsx b/src/components/ui/containers/ProposalDetailsGrid.tsx
index 1cd74b12e4..ff4f67b343 100644
--- a/src/components/ui/containers/ProposalDetailsGrid.tsx
+++ b/src/components/ui/containers/ProposalDetailsGrid.tsx
@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 export function ProposalDetailsGrid({ children }: { children: ReactNode }) {
   return (
     <Grid
-      gap={{ base: 0, lg: 4 }}
+      gap={4}
       templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }}
     >
       {children}
diff --git a/src/components/ui/containers/StyledBox.tsx b/src/components/ui/containers/StyledBox.tsx
index 628a058bbe..ab46a5073c 100644
--- a/src/components/ui/containers/StyledBox.tsx
+++ b/src/components/ui/containers/StyledBox.tsx
@@ -1,11 +1,17 @@
 import { Box, BoxProps } from '@chakra-ui/react';
-import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
+import { Link } from 'react-router-dom';
 
-export function StyledBox({ children, ...rest }: BoxProps) {
+interface StyledBoxProps extends BoxProps {
+  to?: string;
+}
+
+export function StyledBox({ children, to, ...rest }: StyledBoxProps) {
   return (
     <Box
-      bg={BACKGROUND_SEMI_TRANSPARENT}
-      p="1.5rem"
+      as={to ? Link : undefined}
+      to={to}
+      bg="neutral-2"
+      p={{ base: '0.75rem', md: '1.5rem' }}
       borderRadius="0.5rem"
       {...rest}
     >
diff --git a/src/components/ui/containers/TitledInfoBox.tsx b/src/components/ui/containers/TitledInfoBox.tsx
index 7138cceaae..57a7f386d6 100644
--- a/src/components/ui/containers/TitledInfoBox.tsx
+++ b/src/components/ui/containers/TitledInfoBox.tsx
@@ -1,37 +1,40 @@
-import { Box, Divider, Text } from '@chakra-ui/react';
+import { Box, Text, Show, BoxProps } from '@chakra-ui/react';
 import { ReactNode } from 'react';
-import { StyledBox } from './StyledBox';
+import { CONTENT_MAXW } from '../../../constants/common';
+import Divider from '../utils/Divider';
 
 export function TitledInfoBox({
-  minWidth,
   title,
   titleTestId,
   children,
+  ...rest
 }: {
-  minWidth?: { [key: string]: string };
-  title?: string;
-  titleTestId?: string;
-  children?: ReactNode;
-}) {
+  title: string;
+  titleTestId: string;
+  children: ReactNode;
+} & BoxProps) {
   return (
-    <StyledBox
-      flexGrow={1}
-      minWidth={minWidth}
+    <Box
+      py={{ base: '1rem', lg: '1.5rem' }}
+      borderRadius={{ base: '0.75rem', lg: '0.5rem' }}
+      maxW={CONTENT_MAXW}
+      overflowX="scroll"
+      {...rest}
     >
-      {title && (
-        <Box>
-          <Text
-            data-testid={titleTestId}
-            textStyle="text-base-sans-regular"
-            color="grayscale.100"
-            marginBottom="0.75rem"
-          >
-            {title}
-          </Text>
-          <Divider color="chocolate.700" />
-        </Box>
-      )}
+      <Text
+        data-testid={titleTestId}
+        textStyle="display-lg"
+        px={{ base: '1rem', lg: '1.5rem' }}
+      >
+        {title}
+      </Text>
+      <Show above="md">
+        <Divider
+          my="1rem"
+          variant="darker"
+        />
+      </Show>
       {children}
-    </StyledBox>
+    </Box>
   );
 }
diff --git a/src/components/ui/forms/ABISelector.tsx b/src/components/ui/forms/ABISelector.tsx
index 97ef2c619b..17b6666cd7 100644
--- a/src/components/ui/forms/ABISelector.tsx
+++ b/src/components/ui/forms/ABISelector.tsx
@@ -86,11 +86,11 @@ export default function ABISelector({ target, onChange }: IABISelector) {
       <Select
         placeholder={t('select')}
         variant="outline"
-        bg="input.background"
-        borderColor="black.200"
+        bg="neutral-1"
+        borderColor="neutral-3"
         borderWidth="1px"
         borderRadius="4px"
-        color="white"
+        color="white-0"
         onChange={e => {
           const selectedFunction = abiFunctions.find(
             (abiFunction: ABIElement) => abiFunction.name === e.target.value,
@@ -98,13 +98,18 @@ export default function ABISelector({ target, onChange }: IABISelector) {
           if (!selectedFunction) throw new Error('Issue finding selected function');
           onChange(selectedFunction);
         }}
-        sx={{ '> option, > optgroup': { bg: 'input.background' } }}
+        sx={{ '> option, > optgroup': { bg: 'neutral-1' } }}
       >
         {abiFunctions.map((abiFunction: ABIElement) => (
           <option key={abiFunction.name}>{abiFunction.name}</option>
         ))}
       </Select>
-      <Text color="grayscale.500">{t('abiSelectorDescription')}</Text>
+      <Text
+        color="neutral-7"
+        mt="0.5rem"
+      >
+        {t('abiSelectorDescription')}
+      </Text>
     </LabelComponent>
   );
 }
diff --git a/src/components/ui/forms/BigIntInput.tsx b/src/components/ui/forms/BigIntInput.tsx
index 58ef224efd..57d8e28f19 100644
--- a/src/components/ui/forms/BigIntInput.tsx
+++ b/src/components/ui/forms/BigIntInput.tsx
@@ -2,16 +2,16 @@ import {
   FormControlOptions,
   Input,
   InputGroup,
-  InputElementProps,
   InputRightElement,
   Button,
+  InputProps,
 } from '@chakra-ui/react';
 import { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { parseUnits, formatUnits, maxUint256 } from 'viem';
 import { BigIntValuePair } from '../../../types';
 export interface BigIntInputProps
-  extends Omit<InputElementProps, 'value' | 'onChange'>,
+  extends Omit<InputProps, 'value' | 'onChange'>,
     FormControlOptions {
   value?: bigint;
   onChange: (value: BigIntValuePair) => void;
diff --git a/src/components/ui/forms/CustomNonceInput.tsx b/src/components/ui/forms/CustomNonceInput.tsx
index be531e1003..2b86a1c557 100644
--- a/src/components/ui/forms/CustomNonceInput.tsx
+++ b/src/components/ui/forms/CustomNonceInput.tsx
@@ -1,18 +1,23 @@
-import { Text, Input, HStack, VStack, Flex } from '@chakra-ui/react';
-import { Gear } from '@decent-org/fractal-ui';
-import { useRef, useState } from 'react';
+import { Text, HStack, VStack, Flex } from '@chakra-ui/react';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFractal } from '../../../providers/App/AppProvider';
 import SupportTooltip from '../badges/SupportTooltip';
+import ExampleLabel from './ExampleLabel';
+import { InputComponent } from './InputComponent';
 
 export function CustomNonceInput({
   align = 'start',
   nonce,
   onChange,
+  disabled,
+  renderTrimmed = true,
 }: {
   align?: 'start' | 'end';
   nonce: number | undefined;
   onChange: (nonce?: number) => void;
+  disabled?: boolean;
+  renderTrimmed?: boolean;
 }) {
   const {
     node: { safe },
@@ -21,60 +26,58 @@ export function CustomNonceInput({
   const { t } = useTranslation(['proposal', 'common']);
   const errorMessage =
     nonce !== undefined && safe && nonce < safe.nonce ? t('customNonceError') : undefined;
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [revealed, setRevealed] = useState(false);
 
+  const tooltipContainer = useRef<HTMLDivElement>(null);
   if (dao?.isAzorius) return null;
 
-  return revealed ? (
+  return (
     <VStack alignItems={align}>
-      <HStack>
-        <Flex
-          ref={containerRef}
-          me="0.5rem"
-        >
-          <Text
-            alignSelf="center"
-            textStyle="text-md-sans-regular"
-            me="0.5rem"
-          >
-            {t('customNonce', { ns: 'proposal' })}
-          </Text>
-          <SupportTooltip
-            containerRef={containerRef}
-            label={t('customNonceTooltip', { ns: 'proposal' })}
-          />
-        </Flex>
-        <Input
-          w="4.5rem"
-          value={nonce}
-          onChange={e => onChange(e.target.value ? Number(e.target.value) : undefined)}
-          type="number"
-        />
-      </HStack>
+      <InputComponent
+        label={
+          renderTrimmed ? (
+            <Flex
+              alignSelf="center"
+              ref={tooltipContainer}
+              gap="0.5rem"
+              mt="0.5rem"
+            >
+              <Text>{t('customNonceTrimmed', { ns: 'proposal' })}</Text>
+              <SupportTooltip
+                containerRef={tooltipContainer}
+                color="lilac-0"
+                label={t('customNonceTooltip', { ns: 'proposal' })}
+                mx="2"
+                mt="1"
+              />
+            </Flex>
+          ) : (
+            t('customNonce', { ns: 'proposal' })
+          )
+        }
+        helper={renderTrimmed ? '' : t('customNonceTooltip', { ns: 'proposal' })}
+        isRequired={false}
+        value={nonce?.toString() || ''}
+        onChange={e => onChange(e.target.value ? Number(e.target.value) : undefined)}
+        disabled={disabled}
+        subLabel={
+          renderTrimmed ? null : (
+            <HStack>
+              <Text>
+                {t('example', { ns: 'common' })}: <ExampleLabel bg="neutral-4">14</ExampleLabel>{' '}
+              </Text>
+            </HStack>
+          )
+        }
+        testId={`custom-nonce`}
+      />
       {errorMessage && (
         <Text
           color="alert-red.normal"
-          textStyle="text-md-sans-regular"
+          textStyle="body-base"
         >
           {errorMessage}
         </Text>
       )}
     </VStack>
-  ) : (
-    <HStack
-      onClick={() => setRevealed(true)}
-      _hover={{ color: 'gold.500-hover' }}
-      cursor="pointer"
-    >
-      <Input
-        w="0"
-        marginEnd="-2.5rem"
-        visibility="hidden"
-        opacity="0"
-      />
-      <Gear />
-      <Text>{t('advanced', { ns: 'common' })}</Text>
-    </HStack>
   );
 }
diff --git a/src/components/ui/forms/ExampleLabel.tsx b/src/components/ui/forms/ExampleLabel.tsx
index 89c81547a6..bc0491f043 100644
--- a/src/components/ui/forms/ExampleLabel.tsx
+++ b/src/components/ui/forms/ExampleLabel.tsx
@@ -4,12 +4,12 @@ import { PropsWithChildren } from 'react';
 export default function ExampleLabel({ children, ...rest }: PropsWithChildren<TextProps>) {
   return (
     <Text
-      bg="chocolate.700"
-      borderRadius="4px"
-      px="4px"
-      py="1px"
-      color="grayscale.100"
-      fontSize="12px"
+      bg="neutral-3"
+      borderRadius="2px"
+      px="6px"
+      py="2px"
+      color="white-0"
+      textStyle="code-snippet-helper-small"
       as="span"
       {...rest}
     >
diff --git a/src/components/ui/forms/InputComponent.tsx b/src/components/ui/forms/InputComponent.tsx
index 023de3e816..b4f372947a 100644
--- a/src/components/ui/forms/InputComponent.tsx
+++ b/src/components/ui/forms/InputComponent.tsx
@@ -10,19 +10,20 @@ import {
   ResponsiveValue,
 } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
+import { ReactNode } from 'react';
 import { BigIntInput, BigIntInputProps } from './BigIntInput';
 import { EthAddressInput } from './EthAddressInput';
 
 interface BaseProps {
-  label?: string;
+  label?: string | ReactNode;
   id?: string;
   helper?: string;
   isRequired: boolean;
   value: string;
   disabled?: boolean;
-  subLabel?: React.ReactNode;
+  subLabel?: ReactNode;
   errorMessage?: string;
-  children: React.ReactNode;
+  children: ReactNode;
   gridContainerProps?: GridProps;
   inputContainerProps?: GridItemProps;
   maxLength?: number;
@@ -63,35 +64,36 @@ export function LabelComponent(props: Omit<BaseProps, 'value'>) {
     disabled,
     helperSlot = 'start',
   } = props;
+
+  const isStringLabel = typeof label === 'string';
+
   return (
     <Grid
-      columnGap={3}
-      templateColumns={{ base: '1fr', md: '1fr 2fr' }}
-      fontSize="14px"
+      columnGap={4}
+      templateColumns={{ base: '1fr', md: '2fr 3fr' }}
       alignItems="start"
       cursor={disabled ? 'not-allowed' : 'default'}
       {...gridContainerProps}
     >
-      <GridItem>
-        <HStack
-          pb={1}
-          textStyle="text-md-sans-regular"
-        >
-          <Text color={disabled ? 'grayscale.500' : 'grayscale.100'}>{label}</Text>
-          {isRequired && <Text color="gold.500">*</Text>}
-        </HStack>
-        {helperSlot === 'start' && (
-          <Text
-            color="grayscale.500"
-            mr={10}
+      <GridItem alignSelf="center">
+        {isStringLabel ? (
+          <HStack
+            pb={1}
+            textStyle="body-base"
           >
-            {helper}
-          </Text>
+            <Text color={disabled ? 'white-0' : 'white-2'}>{label}</Text>
+            {isRequired && <Text color="lilac-0">*</Text>}
+          </HStack>
+        ) : (
+          label
         )}
+        {helperSlot === 'start' && <Text color="neutral-7">{helper}</Text>}
       </GridItem>
+
       <GridItem {...inputContainerProps}>
         <LabelWrapper
           subLabel={subLabel}
+          // TODO: LabelWrapper error message design is out of date
           errorMessage={errorMessage}
         >
           {children}
@@ -99,7 +101,7 @@ export function LabelComponent(props: Omit<BaseProps, 'value'>) {
       </GridItem>
       {helperSlot === 'end' && (
         <GridItem>
-          <Text color="grayscale.500">{helper}</Text>
+          <Text color="neutral-7">{helper}</Text>
         </GridItem>
       )}
     </Grid>
@@ -167,7 +169,6 @@ export function TextareaComponent(props: TextareaProps) {
         isDisabled={disabled}
         rows={rows}
         placeholder={placeholder}
-        borderColor="black.400"
         size="base"
         p="0.5rem 1rem"
         maxLength={maxLength}
@@ -188,7 +189,7 @@ export function BigIntComponent(props: BigIntProps) {
         id={id}
         onChange={onChange}
         decimalPlaces={decimalPlaces}
-        placeholder="0"
+        placeholder="0.0"
         isDisabled={disabled}
       />
     </LabelComponent>
diff --git a/src/components/ui/forms/Radio/RadioWithText.tsx b/src/components/ui/forms/Radio/RadioWithText.tsx
index 9e01d42c11..1d40caf76d 100644
--- a/src/components/ui/forms/Radio/RadioWithText.tsx
+++ b/src/components/ui/forms/Radio/RadioWithText.tsx
@@ -27,20 +27,26 @@ export function RadioWithText({
         data-testid={testId}
         type="radio"
         isDisabled={disabled}
-        textColor="gold.500"
-        colorScheme="blackAlpha"
-        borderColor="gold.500"
+        bg="black-0"
+        color="lilac--3"
+        _disabled={{ bg: 'neutral-6', color: 'neutral-5' }}
+        _hover={{ bg: 'black-0', color: 'lilac--4' }}
+        _checked={{
+          bg: 'black-0',
+          color: 'lilac--3',
+          borderWidth: '6px',
+        }}
         size="lg"
         value={value}
       >
         <Box
-          ml="4"
-          p="0.5rem 1rem"
+          p="0.5rem 0"
+          ml="0.25rem"
         >
           <HStack>
             <Text
-              textStyle="text-base-sans-regular"
-              color={disabled ? 'grayscale.400' : 'grayscale.100'}
+              textStyle="body-base"
+              color={disabled ? 'neutral-5' : 'white-0'}
             >
               {label}
             </Text>
@@ -48,13 +54,14 @@ export function RadioWithText({
               <SupportTooltip
                 label={tooltip}
                 closeDelay={1000}
-                pointerEvents={'all'}
+                pointerEvents="all"
+                color="lilac-0"
               />
             )}
           </HStack>
           <Text
-            textStyle="text-md-sans-regular"
-            color={disabled ? 'grayscale.400' : 'grayscale.500'}
+            textStyle="body-base"
+            color={disabled ? 'neutral-5' : 'neutral-7'}
           >
             {description}
           </Text>
diff --git a/src/components/ui/forms/WeightedInput.tsx b/src/components/ui/forms/WeightedInput.tsx
index 030ccdda82..a282f6e194 100644
--- a/src/components/ui/forms/WeightedInput.tsx
+++ b/src/components/ui/forms/WeightedInput.tsx
@@ -11,8 +11,8 @@ interface IWeightedInput {
 export default function WeightedInput({ label, value, totalValue, onChange }: IWeightedInput) {
   return (
     <Flex
-      color="gold.500"
-      bg="chocolate.500"
+      color="lilac-0"
+      bg="neutral-3"
       borderRadius="0.5rem"
       mt={4}
       mb={4}
@@ -37,9 +37,9 @@ export default function WeightedInput({ label, value, totalValue, onChange }: IW
           h="24px"
           variant="secondary"
           border="none"
-          bg="chocolate.700"
+          bg="neutral-2"
           onClick={() => onChange(Math.max(0, value - 1))}
-          disabled={!value}
+          isDisabled={!value}
         >
           <Minus />
         </IconButton>
@@ -51,7 +51,7 @@ export default function WeightedInput({ label, value, totalValue, onChange }: IW
           bg="transparent"
           padding={0}
           textAlign="center"
-          color="gold.500"
+          color="lilac-0"
           width="48px"
         />
         <IconButton
@@ -61,7 +61,7 @@ export default function WeightedInput({ label, value, totalValue, onChange }: IW
           h="24px"
           variant="secondary"
           border="none"
-          bg="chocolate.700"
+          bg="neutral-2"
           onClick={() => onChange(value + 1)}
           mr={3}
         >
diff --git a/src/components/ui/icons/FavoriteIcon.tsx b/src/components/ui/icons/FavoriteIcon.tsx
index c3bdeb1f74..1420cf9094 100644
--- a/src/components/ui/icons/FavoriteIcon.tsx
+++ b/src/components/ui/icons/FavoriteIcon.tsx
@@ -1,5 +1,5 @@
-import { Box, BoxProps, IconButton, Tooltip } from '@chakra-ui/react';
-import { StarGoldSolid, StarOutline } from '@decent-org/fractal-ui';
+import { Box, BoxProps, Button, Tooltip, Icon, IconButton } from '@chakra-ui/react';
+import { Star } from '@phosphor-icons/react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getAddress } from 'viem';
@@ -9,7 +9,7 @@ interface Props extends BoxProps {
   safeAddress: string;
 }
 
-export default function FavoriteIcon({ safeAddress, ...rest }: Props) {
+export function FavoriteIcon({ safeAddress, ...rest }: Props) {
   const { favoritesList, toggleFavorite } = useAccountFavorites();
   const isFavorite = useMemo(
     () => (!!safeAddress ? favoritesList.includes(getAddress(safeAddress)) : false),
@@ -19,13 +19,22 @@ export default function FavoriteIcon({ safeAddress, ...rest }: Props) {
   return (
     <Box {...rest}>
       <Tooltip label={t('favoriteTooltip')}>
-        <IconButton
-          color="gold.500"
-          _hover={{ color: 'gold.500-hover' }}
-          variant="ghost"
-          minWidth="0px"
-          icon={isFavorite ? <StarGoldSolid boxSize="1.5rem" /> : <StarOutline boxSize="1.5rem" />}
-          onClick={() => toggleFavorite(safeAddress)}
+        <Button
+          variant="tertiary"
+          size="icon-md"
+          as={IconButton}
+          icon={
+            <Icon
+              as={Star}
+              boxSize="1.25rem"
+              weight={isFavorite ? 'fill' : 'regular'}
+            />
+          }
+          onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+            toggleFavorite(safeAddress);
+          }}
           aria-label={t('favoriteTooltip')}
         />
       </Tooltip>
diff --git a/src/components/ui/icons/IconWithText.tsx b/src/components/ui/icons/IconWithText.tsx
deleted file mode 100644
index 247893c75a..0000000000
--- a/src/components/ui/icons/IconWithText.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Link, HStack, Text } from '@chakra-ui/react';
-import { ReactNode } from 'react';
-
-interface IconWithTextProps {
-  icon: ReactNode;
-  label: string;
-  url: string;
-  testid: string;
-}
-
-export default function IconWithText({ icon, label, url, testid }: IconWithTextProps) {
-  return (
-    <Link
-      data-testid={testid}
-      href={url}
-      target="_blank"
-      color="black"
-    >
-      <HStack _hover={{ color: 'gold.500-hover' }}>
-        {icon}
-        <Text
-          textStyle="text-button-md-semibold"
-          color="gold.500"
-        >
-          {label}
-        </Text>
-      </HStack>
-    </Link>
-  );
-}
diff --git a/src/components/ui/icons/Icons.tsx b/src/components/ui/icons/Icons.tsx
new file mode 100644
index 0000000000..7c0a5524b7
--- /dev/null
+++ b/src/components/ui/icons/Icons.tsx
@@ -0,0 +1,485 @@
+export function StetoscopeIllustrationDesktop() {
+  return (
+    <svg
+      width="527"
+      height="329"
+      viewBox="0 0 527 329"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M338.335 97.1032C337.446 108.257 323.268 119.268 300.778 122.516C267.309 127.343 227.156 114.335 229.485 90.9809C231.796 67.831 273.541 59.6501 305.462 67.9997C327.01 73.643 339.215 85.9941 338.335 97.0943V97.1032Z"
+        fill="#501464"
+      />
+      <path
+        d="M335.997 93.1811C335.108 104.335 321.499 115.39 299.951 118.718C267.896 123.66 229.502 110.794 231.814 87.4402C234.098 64.2903 274.101 55.9674 304.627 64.2105C325.232 69.7739 336.877 82.0808 335.997 93.1899V93.1811Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M285.959 120.217C267.051 120.217 248.597 114.672 238.81 105.435C233.218 100.146 230.711 94.0772 231.369 87.3957C232.036 80.6877 235.743 74.9646 242.392 70.3861C256.553 60.6257 282.777 57.8574 304.742 63.7846C324.361 69.0818 337.393 81.1935 336.442 93.2254C335.482 105.337 320.503 116.003 300.022 119.161C295.39 119.871 290.661 120.217 285.959 120.217ZM280.572 61.5574C265.922 61.5574 251.913 64.8937 242.899 71.1049C236.472 75.5325 232.898 81.0427 232.258 87.4757C231.627 93.8731 234.036 99.6939 239.423 104.778C251.45 116.145 276.883 121.823 299.889 118.274C319.961 115.177 334.628 104.849 335.553 93.1455C336.477 81.5395 323.712 69.8182 304.511 64.6275C296.822 62.5512 288.599 61.5485 280.572 61.5485V61.5574Z"
+        fill="#501464"
+      />
+      <path
+        d="M309.426 58.603H258.33L264.864 80.3332L266.322 86.1007C268.686 91.8682 279.105 95.0536 288.643 93.7758C295.719 92.8264 298.955 89.2951 300.43 86.1806L309.409 58.603H309.426Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M284.297 94.5035C275.701 94.5035 267.931 91.185 265.913 86.2693L264.438 80.4398L257.735 58.1594H310.031L300.858 86.3137C299.4 89.3927 296.119 93.2169 288.706 94.2107C287.23 94.4059 285.746 94.5035 284.297 94.5035ZM258.926 59.0467L265.291 80.2091L266.758 85.9942C268.918 91.247 278.919 94.6366 288.59 93.3322C295.613 92.3917 298.688 88.816 300.04 85.9855L308.814 59.0467H258.935H258.926Z"
+        fill="#501464"
+      />
+      <path
+        d="M137.48 187.405L76.1606 123.599C61.8843 108.736 55.2615 88.1683 57.9994 67.1657C60.9863 44.2554 74.9605 23.6433 96.3572 10.6265L100.757 17.8315C81.2808 29.686 69.0758 47.5917 66.3912 68.2482C63.991 86.7042 69.7779 104.743 82.2764 117.751L143.595 181.558L137.488 187.405H137.48Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M137.462 188.035L75.8404 123.909C61.4663 108.949 54.7992 88.2481 57.5549 67.1124C60.5595 44.0691 74.6137 23.3415 96.1172 10.2537L96.4993 10.0229L101.362 17.991L100.98 18.2217C81.6186 30.0051 69.4935 47.7956 66.8178 68.3191C64.4354 86.642 70.178 104.548 82.5787 117.458L144.2 181.584L137.453 188.044L137.462 188.035ZM96.197 11.2384C75.1381 24.202 61.3773 44.5836 58.435 67.2277C55.7148 88.0972 62.293 108.532 76.4804 123.297L137.488 186.784L142.955 181.557L81.9475 118.071C69.3602 104.974 63.5287 86.7929 65.9467 68.2038C68.6401 47.5384 80.7741 29.6235 100.144 17.6981L96.2059 11.2473L96.197 11.2384Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M135.336 185.062L74.0171 121.256C60.843 107.547 54.8161 88.0175 57.4651 67.6626C60.5231 44.2111 74.506 23.3151 95.8316 10.3337L97.2184 12.6051C76.5862 25.1694 63.0654 45.3558 60.1142 68.0088C57.5629 87.5651 63.3411 106.296 75.9462 119.419L137.265 183.226L135.345 185.071L135.336 185.062Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M113.034 1.25599C111.132 0.235589 108.785 0.0227912 106.5 0.972211C103.78 2.11684 101.966 4.86746 101.984 7.81332C102.011 12.6492 106.349 16.0476 110.874 15.1958C114.385 14.5303 116.856 11.5223 116.963 8.09732C116.99 7.40522 116.785 6.73089 116.456 6.12752L114.678 2.90648C114.296 2.21438 113.727 1.63755 113.025 1.26488L113.034 1.25599Z"
+        fill="#501464"
+      />
+      <path
+        d="M110.882 15.1961L103.024 18.6298C101.833 19.3663 100.269 19.0203 99.5131 17.8491L95.8595 12.188C95.0683 10.9635 95.4594 9.3219 96.7217 8.58543L103.122 3.90063C103.478 8.90505 105.922 12.7382 110.882 15.1872V15.1961Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M110.883 15.1956L103.025 18.6293C101.833 19.3658 100.269 19.0199 99.5134 17.8486L95.8598 12.1875C95.0686 10.963 95.4597 9.32141 96.722 8.58494L103.122 3.90015C103.478 8.90457 105.922 12.7377 110.883 15.1867V15.1956Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M67.467 59.7568C67.3692 59.7568 67.2714 59.7479 67.1736 59.7212C66.4536 59.5615 66.0003 58.8516 66.1603 58.1329C66.4092 57.0238 72.5872 30.6884 99.8421 15.7107C100.491 15.3557 101.3 15.5954 101.656 16.2343C102.011 16.882 101.771 17.6895 101.131 18.0444C74.9606 32.4188 68.8271 58.4523 68.7648 58.7096C68.6226 59.3307 68.0715 59.7479 67.467 59.7479V59.7568Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M506.816 456.889L329.65 292.799C329.588 289.117 328.619 285.15 326.77 281.273L326.415 280.519L263.958 179.41C259.789 168.86 252.935 158.461 243.681 149.303L225.36 131.194C223.022 128.878 219.36 128.54 216.64 130.395C213.057 132.826 212.586 137.919 215.662 140.963L232.667 157.804C242.463 166.225 247.388 180.368 247.388 180.368C252.428 194.166 250.588 207.467 242.108 216.304C241.85 216.57 241.583 216.845 241.308 217.103C241.228 217.174 241.156 217.253 241.085 217.324C224.782 232.524 192.567 227.813 170.557 205.754L150.014 185.16C146.725 181.859 141.551 181.371 137.693 183.988C132.679 187.396 131.995 194.503 136.262 198.806L155.063 217.715C166.797 229.516 180.46 237.786 194.194 242.435L307.409 306.827L308.156 307.129C310.76 308.167 313.303 308.664 315.676 308.655L492.433 472.364L506.816 456.889ZM256.757 233.101C256.757 233.101 256.793 233.065 256.811 233.039C256.829 233.021 256.846 233.003 256.864 232.986C256.908 232.941 256.944 232.897 256.98 232.861C257.451 232.382 257.904 231.885 258.34 231.388C258.615 231.069 258.891 230.749 259.158 230.43C259.38 230.164 259.593 229.898 259.806 229.632C260.269 229.046 260.713 228.443 261.14 227.83C261.184 227.768 261.238 227.697 261.282 227.635C263.105 224.991 264.58 222.178 265.718 219.206C265.834 218.895 265.949 218.593 266.056 218.283C266.216 217.821 266.385 217.36 266.527 216.89C266.714 216.304 266.891 215.71 267.06 215.115C267.105 214.964 267.14 214.813 267.176 214.654C267.247 214.37 267.327 214.086 267.398 213.802L311.107 285.843C311.196 286.18 311.214 286.632 310.903 287.04C310.6 287.448 310.209 287.493 309.907 287.448L236.196 244.831C244.294 242.604 251.308 238.647 256.766 233.11L256.757 233.101Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M213.965 131.522L150.041 70.3155C136.085 56.9526 117.115 48.8249 95.194 46.8285C72.1527 44.7255 46.9513 49.5703 22.3189 60.848L18.7898 53.1726C44.7646 41.2827 71.4503 36.1808 95.9672 38.4168C119.817 40.5996 140.539 49.5171 155.9 64.2198L219.823 125.426L213.965 131.522Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M213.974 132.152L213.654 131.841L149.73 70.6349C135.845 57.343 116.973 49.2596 95.1493 47.2631C72.1791 45.1691 47.0578 50.0049 22.4964 61.2471L22.0964 61.4334L18.2028 52.9507L18.6119 52.7644C44.6577 40.839 71.4146 35.7193 96.0115 37.9731C119.96 40.1647 140.778 49.1265 156.21 63.9002L220.454 125.408L213.982 132.143L213.974 132.152ZM84.5265 45.9055C88.1356 45.9055 91.7092 46.0653 95.2294 46.3847C117.248 48.3989 136.307 56.5622 150.344 69.9961L213.947 130.892L219.183 125.435L155.579 64.539C140.298 49.9073 119.666 41.0254 95.9139 38.8515C71.6014 36.6332 45.1376 41.6553 19.3673 53.3855L22.5231 60.2535C43.3331 50.7859 64.5432 45.8967 84.5176 45.8967L84.5265 45.9055Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M218.187 133.891L154.263 72.6844C122.83 42.5869 71.4318 37.3785 23.3314 59.4015L22.2202 56.9791C71.3252 34.4947 123.879 39.8985 156.112 70.7591L220.036 131.966L218.187 133.882V133.891Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M326.761 276.517L326.406 275.762L263.949 174.654C259.78 164.104 252.926 153.704 243.672 144.547L225.351 126.437C223.013 124.121 219.351 123.784 216.631 125.639C213.048 128.07 212.577 133.163 215.653 136.207L232.658 153.048C242.454 161.468 247.379 175.612 247.379 175.612C252.419 189.41 250.579 202.71 242.099 211.548C241.841 211.814 241.574 212.089 241.299 212.347C241.219 212.418 241.148 212.497 241.077 212.568C224.774 227.768 192.558 223.056 170.548 200.998L150.014 180.404C146.725 177.103 141.551 176.615 137.693 179.232C132.679 182.639 131.995 189.747 136.262 194.05L155.063 212.959C166.797 224.76 180.46 233.03 194.194 237.679L307.409 302.071L308.156 302.373C315.872 305.461 323.054 303.81 326.895 298.211C330.637 292.746 330.548 284.44 326.761 276.517ZM310.894 282.275C310.591 282.684 310.2 282.728 309.898 282.684L236.187 240.066C244.286 237.839 251.299 233.882 256.757 228.345C256.775 228.327 256.793 228.309 256.811 228.283C256.829 228.265 256.846 228.247 256.864 228.229C256.908 228.185 256.944 228.141 256.98 228.105C257.451 227.626 257.904 227.129 258.34 226.632C258.615 226.313 258.891 225.993 259.158 225.674C259.38 225.408 259.593 225.141 259.806 224.875C260.269 224.29 260.713 223.686 261.14 223.074C261.184 223.012 261.238 222.941 261.282 222.879C263.105 220.235 264.58 217.422 265.718 214.449C265.834 214.139 265.949 213.837 266.056 213.527C266.216 213.065 266.385 212.604 266.527 212.134C266.714 211.548 266.891 210.954 267.06 210.359C267.105 210.208 267.14 210.057 267.176 209.898C267.247 209.614 267.327 209.33 267.398 209.046L311.107 281.086C311.196 281.424 311.214 281.876 310.903 282.284L310.894 282.275Z"
+        fill="#501464"
+      />
+      <path
+        d="M10.1836 70.3774C15.4417 70.3774 19.7043 66.1228 19.7043 60.8744C19.7043 55.626 15.4417 51.3713 10.1836 51.3713C4.9256 51.3713 0.663147 55.626 0.663147 60.8744C0.663147 66.1228 4.9256 70.3774 10.1836 70.3774Z"
+        fill="#501464"
+      />
+      <path
+        d="M6.53053 68.0174C9.45167 68.0174 11.8197 65.6535 11.8197 62.7377C11.8197 59.8219 9.45167 57.4583 6.53053 57.4583C3.6094 57.4583 1.24139 59.8219 1.24139 62.7377C1.24139 65.6535 3.6094 68.0174 6.53053 68.0174Z"
+        fill="#501464"
+      />
+      <path
+        d="M14.193 52.2499L22.4068 49.8451C23.6424 49.366 25.038 49.9605 25.5359 51.185L27.9362 57.0857C28.4606 58.3634 27.8027 59.8185 26.496 60.2799L19.2156 63.909C19.8201 59.5879 18.1488 55.7015 14.193 52.2499Z"
+        fill="#501464"
+      />
+      <path
+        d="M320.607 277.687L306.222 293.16L496.159 469.09L510.544 453.617L320.607 277.687Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M502.291 462.355L321.454 296.987C319.347 298.859 315.872 299.578 310.28 297.528C301.204 294.21 194.656 232.364 194.656 232.364C173.197 231.202 143.355 197.165 133.63 185.346C133.035 188.372 133.87 191.646 136.253 194.05L155.054 212.959C166.788 224.76 180.451 233.03 194.185 237.679L307.4 302.071L308.147 302.373C311.551 303.739 314.858 304.174 317.818 303.757C317.818 303.757 317.827 303.757 317.836 303.757L496.175 468.938L502.291 462.364V462.355Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M232.658 153.057C240.356 159.676 245.05 169.836 246.703 173.873C246.792 174.077 246.872 174.272 246.943 174.459C246.943 174.459 246.001 165.444 241.387 158.354C237.156 151.841 219.422 134.663 213.955 129.206C213.662 130.573 212.986 133.509 215.653 136.207L232.658 153.048V153.057Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M14.1916 52.2494L22.4054 49.8446C23.641 49.3655 25.0366 49.96 25.5344 51.1845L27.9348 57.0852C28.4592 58.3629 27.8013 59.818 26.4946 60.2794L19.2142 63.9086C19.8187 59.5874 18.1474 55.7011 14.1916 52.2494Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M315.143 277.537L261.514 189.277C260.767 214.672 247.869 232.835 217.636 231.433C216.169 231.22 236.188 240.066 236.188 240.066C244.286 237.839 251.3 233.882 256.758 228.345C256.776 228.327 256.794 228.31 256.811 228.283C256.829 228.265 256.847 228.247 256.864 228.23C256.909 228.185 256.945 228.141 256.98 228.105C257.451 227.626 257.905 227.129 258.34 226.632C258.616 226.313 258.891 225.994 259.158 225.674C259.38 225.408 259.594 225.142 259.807 224.876C260.269 224.29 260.714 223.687 261.14 223.075C261.185 223.012 261.238 222.941 261.283 222.879C263.105 220.235 264.581 217.422 265.718 214.45C265.834 214.139 265.949 213.838 266.056 213.527C266.216 213.066 266.385 212.604 266.527 212.134C266.714 211.548 266.892 210.954 267.061 210.359C267.105 210.208 267.141 210.058 267.176 209.898C267.23 209.676 267.292 209.463 267.345 209.241C267.363 209.179 267.381 209.108 267.398 209.046L311.107 281.087C311.196 281.424 311.214 281.876 310.903 282.285C310.601 282.693 310.21 282.737 309.908 282.693C318.495 285.275 315.152 277.546 315.152 277.546L315.143 277.537Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M39.9635 48.0262C39.4035 48.0262 38.8791 47.6712 38.7013 47.1122C38.4702 46.4113 38.8524 45.6658 39.5457 45.4351C40.2213 45.2133 56.2313 39.9605 64.1517 39.7742H64.1871C64.9071 39.7742 65.5027 40.3509 65.5205 41.0785C65.5383 41.815 64.9516 42.4183 64.2138 42.4361C56.6933 42.6047 40.5504 47.9108 40.3815 47.9551C40.2393 47.9995 40.0969 48.0262 39.9635 48.0262Z"
+        fill="#DCC8F0"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M292.013 93.057L311.027 117.254C311.027 117.254 328.273 115.382 330.62 107.422L300.929 84.7073C300.929 84.7073 300.298 91.309 292.022 93.0481L292.013 93.057Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M292.013 93.0574L291.373 76.3315L302.724 77.6003L298.422 89.7033C298.422 89.7033 293.488 93.3147 292.013 93.0574Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M301.392 83.27C302.752 79.0996 305.294 71.3003 307.152 65.5771C308.201 62.3562 309.037 59.7919 309.321 58.9223C309.392 58.7094 309.428 58.6028 309.428 58.6028H258.332L259.994 64.1129C265.416 67.2274 272.919 69.206 280.768 69.8005V93.8555L278.893 120.528C278.893 120.528 322.646 121.779 327.962 108.514L301.392 83.27Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M293.719 71.6554C289.888 76.0565 290.359 82.7202 294.768 86.5445L422.971 197.245L436.838 181.309L308.636 70.6085C304.227 66.7842 297.551 67.2544 293.719 71.6554Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M293.951 66.6067C299.747 65.8258 304.601 64.2109 308.281 62.1168C308.974 59.9784 309.428 58.5942 309.428 58.5942H258.332L258.945 60.6262C267.301 65.9234 281.417 68.2837 293.943 66.5978L293.951 66.6067Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M285.826 65.6481C271.647 65.6481 257.886 61.5488 250.899 54.8052C247.086 51.1229 245.317 46.7307 245.779 42.0989C246.241 37.5027 248.855 33.4212 253.335 30.289C263.229 23.368 282.208 21.3359 298.475 25.453C313.276 29.2063 322.735 37.7246 322.023 46.6598C321.312 55.5861 310.547 62.9596 295.231 65.0182C292.12 65.4352 288.964 65.6392 285.826 65.6392V65.6481ZM280.999 29.5525C271.381 29.5525 262.313 31.5933 256.9 35.3821C253.904 37.4762 252.251 39.9429 251.966 42.7202C251.691 45.4265 252.784 47.9907 255.22 50.342C262.376 57.2453 279.212 60.91 294.395 58.8692C304.396 57.5293 315.303 52.6225 315.81 46.1717C316.192 41.3448 309.836 34.7431 296.929 31.469C291.799 30.1646 286.306 29.5436 280.99 29.5436L280.999 29.5525Z"
+        fill="#501464"
+      />
+      <path
+        d="M316.138 46.2693C315.64 52.5781 307.258 58.7803 293.941 60.5638C274.127 63.2257 250.312 55.7812 251.646 42.578C252.961 29.4813 277.674 24.9472 296.599 29.7387C309.373 32.9774 316.636 39.9872 316.129 46.2693H316.138Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M285.825 61.5399C273.398 61.5399 261.121 57.9818 255.192 52.2498C252.188 49.3483 250.845 46.0828 251.201 42.5247C251.556 38.9666 253.557 35.8878 257.13 33.3856C265.717 27.3785 282.358 25.6571 296.706 29.295C308.955 32.4006 317.125 39.3836 316.573 46.2869C316.022 53.2345 306.742 59.2772 293.994 60.9897C291.31 61.3535 288.554 61.5221 285.816 61.5221L285.825 61.5399ZM281.131 28.2925C271.815 28.2925 263.068 30.3243 257.646 34.1219C254.286 36.4733 252.419 39.3305 252.09 42.6224C251.761 45.8877 253.014 48.9133 255.814 51.6196C262.882 58.443 279.247 62.0988 293.888 60.129C306.208 58.4697 315.178 52.7644 315.702 46.2338C316.218 39.7654 308.324 33.1637 296.501 30.1646C291.505 28.9046 286.243 28.2925 281.14 28.2925H281.131Z"
+        fill="#501464"
+      />
+      <path
+        d="M291.719 31.7264C285.986 38.399 289.799 42.6493 311.018 48.2571C289.79 42.6404 281.221 43.9358 272.047 54.6101C281.23 43.9269 278.047 39.5348 263.122 35.5863C278.047 39.5348 285.986 38.3901 291.719 31.7175V31.7264Z"
+        fill="#CAFF8A"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M429.593 189.623L301.39 78.9219C298.51 76.4286 294.67 75.7721 291.283 76.828C290.696 80.3329 291.879 84.0418 294.768 86.544L422.97 197.245L429.602 189.623H429.593Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M440.617 165.311L442.377 164.495C444.706 163.412 447.471 163.864 449.311 165.657C450.333 166.651 451.426 167.857 452.333 169.179C454.28 172.036 453.48 175.932 450.582 177.831L449.986 178.221L440.617 165.311Z"
+        fill="#501464"
+      />
+      <path
+        d="M387.2 183.944L388.382 168.354C388.622 165.142 389.591 162.01 391.28 159.259C391.316 159.197 391.351 159.144 391.387 159.082C394.231 154.512 398.836 151.318 404.081 150.075L415.335 147.414L393.885 186.668L387.2 183.935V183.944Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M394.09 187.236L386.738 184.228L387.947 168.318C388.196 164.991 389.227 161.779 390.907 159.028L391.023 158.842C393.877 154.272 398.597 150.918 403.993 149.649L416.215 146.766L394.099 187.236H394.09ZM387.672 183.651L393.69 186.109L414.473 148.079L404.188 150.51C399.024 151.735 394.49 154.938 391.77 159.312L391.663 159.481C390.045 162.116 389.067 165.186 388.827 168.38L387.672 183.642V183.651Z"
+        fill="#501464"
+      />
+      <path
+        d="M479.758 210.99L426.901 149.623C425.239 146.793 420.776 146.704 420.776 146.704C404.509 147.352 395.842 159.375 389.859 173.19C383.877 187.006 390.01 192.959 390.01 192.959L468.379 242.835L479.766 210.998L479.758 210.99Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M468.601 243.5L389.69 193.27C389.433 193.021 383.405 186.952 389.441 173.013C399.513 149.756 412.136 146.606 420.75 146.26C420.972 146.26 425.506 146.385 427.275 149.401L480.255 210.901L468.592 243.509L468.601 243.5ZM390.286 192.604L468.139 242.152L479.251 211.078L426.563 149.907C424.999 147.263 420.803 147.139 420.768 147.139C403.495 147.831 395.397 161.513 390.268 173.35C384.685 186.251 389.859 192.134 390.295 192.595L390.286 192.604Z"
+        fill="#501464"
+      />
+      <path
+        d="M486.415 226.695C485.766 235.284 480.254 242.852 473.552 243.651C466.156 244.538 460.209 236.987 460.991 226.712C461.773 216.437 468.858 208.878 476.121 209.756C482.699 210.546 487.064 218.105 486.415 226.695Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M472.405 244.166C469.783 244.166 467.267 243.136 465.241 241.193C461.863 237.963 460.111 232.542 460.556 226.677C461 220.767 463.605 215.319 467.525 212.116C470.165 209.96 473.232 208.957 476.183 209.321C482.85 210.129 487.544 217.777 486.868 226.739C486.193 235.665 480.37 243.296 473.623 244.104C473.223 244.148 472.814 244.174 472.414 244.174L472.405 244.166ZM474.957 210.129C472.583 210.129 470.227 211.043 468.076 212.799C464.343 215.861 461.863 221.069 461.436 226.748C461.009 232.347 462.663 237.502 465.854 240.554C468.032 242.631 470.681 243.554 473.508 243.216C479.855 242.453 485.331 235.186 485.98 226.668C486.62 218.176 482.273 210.945 476.077 210.2C475.703 210.155 475.33 210.129 474.965 210.129H474.957Z"
+        fill="#501464"
+      />
+      <path
+        d="M388.117 178.491L387.599 179.213L460.856 231.621L461.374 230.9L388.117 178.491Z"
+        fill="#501464"
+      />
+      <path
+        d="M468.218 220.679C464.387 225.08 464.858 231.743 469.267 235.568L597.47 346.268L611.337 330.332L483.134 219.632C478.725 215.807 472.049 216.278 468.218 220.679Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M604.1 338.646L475.898 227.946C473.018 225.453 469.951 222.87 467.844 221.149C463.595 226.854 466.262 233.199 469.275 235.568L597.478 346.268L604.109 338.646H604.1Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M417.983 197.794C417.681 200.758 415.219 202.488 412.437 202.16C409.654 201.841 406.756 199.48 405.796 196.366C404.596 192.435 406.81 188.815 411.068 189.321C415.317 189.827 418.366 194.059 417.975 197.794H417.983Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M413.103 202.648C412.863 202.648 412.623 202.63 412.383 202.604C409.29 202.249 406.347 199.676 405.369 196.499C404.694 194.29 405.032 192.08 406.276 190.599C407.405 189.259 409.121 188.647 411.121 188.886C415.77 189.436 418.81 194.068 418.419 197.848C418.268 199.33 417.583 200.625 416.499 201.495C415.557 202.249 414.365 202.648 413.094 202.648H413.103ZM410.303 189.72C408.925 189.72 407.752 190.226 406.961 191.166C405.912 192.417 405.636 194.316 406.223 196.242C407.085 199.054 409.779 201.415 412.49 201.725C413.788 201.876 415.015 201.548 415.948 200.803C416.855 200.075 417.406 199.019 417.539 197.75C417.886 194.387 415.166 190.253 411.014 189.765C410.765 189.738 410.534 189.72 410.294 189.72H410.303Z"
+        fill="#501464"
+      />
+      <path
+        d="M416.642 197.165C416.322 200.279 413.736 202.098 410.811 201.761C407.886 201.424 404.837 198.948 403.833 195.665C402.57 191.531 404.899 187.724 409.38 188.256C413.851 188.789 417.051 193.234 416.642 197.165Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M411.513 202.24C411.264 202.24 411.015 202.223 410.767 202.196C407.522 201.823 404.437 199.126 403.415 195.79C402.704 193.474 403.06 191.158 404.357 189.605C405.531 188.194 407.335 187.556 409.433 187.804C414.313 188.381 417.496 193.243 417.087 197.2C416.927 198.753 416.216 200.111 415.078 201.025C414.091 201.814 412.847 202.24 411.513 202.24ZM408.571 188.647C407.113 188.647 405.877 189.179 405.042 190.173C403.931 191.495 403.646 193.5 404.26 195.532C405.166 198.496 408.002 200.98 410.864 201.309C412.242 201.477 413.531 201.122 414.518 200.333C415.478 199.561 416.065 198.452 416.198 197.112C416.563 193.563 413.7 189.206 409.318 188.691C409.06 188.665 408.811 188.647 408.562 188.647H408.571Z"
+        fill="#501464"
+      />
+    </svg>
+  );
+}
+
+export function StetoscopeIllustrationMobile() {
+  return (
+    <svg
+      width="278"
+      height="146"
+      viewBox="0 0 278 146"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M153.724 44.5723C153.321 49.6292 146.892 54.6218 136.696 56.0942C121.521 58.2827 103.316 52.385 104.372 41.7965C105.42 31.3006 124.347 27.5915 138.82 31.3771C148.589 33.9357 154.123 39.5356 153.724 44.5683V44.5723Z"
+        fill="#501464"
+      />
+      <path
+        d="M152.664 42.7943C152.261 47.8511 146.09 52.8638 136.321 54.3724C121.787 56.6132 104.38 50.7799 105.428 40.1914C106.464 29.6955 124.601 25.922 138.441 29.6593C147.783 32.1817 153.063 37.7615 152.664 42.7983V42.7943Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M129.977 55.0521C121.404 55.0521 113.037 52.5378 108.6 48.3499C106.065 45.9522 104.928 43.2005 105.227 40.1712C105.529 37.1298 107.21 34.535 110.224 32.4592C116.645 28.0339 128.534 26.7788 138.493 29.4661C147.388 31.8678 153.297 37.3591 152.865 42.8143C152.43 48.3056 145.639 53.1412 136.353 54.5734C134.253 54.8952 132.109 55.0521 129.977 55.0521ZM127.535 28.4564C120.893 28.4564 114.541 29.969 110.454 32.7851C107.54 34.7925 105.92 37.2908 105.63 40.2074C105.343 43.108 106.436 45.747 108.878 48.0522C114.331 53.2056 125.862 55.7803 136.293 54.1711C145.393 52.7671 152.043 48.0843 152.462 42.778C152.881 37.516 147.094 32.2017 138.388 29.8483C134.902 28.9069 131.174 28.4523 127.535 28.4523V28.4564Z"
+        fill="#501464"
+      />
+      <path
+        d="M140.617 27.1167H117.45L120.413 36.9689L121.074 39.5839C122.146 42.1988 126.869 43.643 131.194 43.0637C134.402 42.6332 135.869 41.0322 136.538 39.6201L140.609 27.1167H140.617Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M129.223 43.3936C125.326 43.3936 121.803 41.889 120.889 39.6603L120.219 37.0172L117.181 26.9155H140.891L136.732 39.6804C136.071 41.0764 134.584 42.8102 131.222 43.2608C130.553 43.3493 129.88 43.3936 129.223 43.3936ZM117.721 27.3178L120.606 36.9126L121.271 39.5355C122.251 41.9171 126.785 43.4539 131.17 42.8625C134.354 42.4361 135.748 40.8149 136.361 39.5316L140.339 27.3178H117.725H117.721Z"
+        fill="#501464"
+      />
+      <path
+        d="M62.6579 85.5143L34.8565 56.5852C28.3838 49.8467 25.3811 40.5214 26.6224 30.9991C27.9766 20.6118 34.3124 11.2664 44.0135 5.36475L46.0085 8.63144C37.178 14.0061 31.6443 22.1244 30.4272 31.4899C29.339 39.8576 31.9627 48.0363 37.6294 53.934L65.4307 82.8632L62.6619 85.5143H62.6579Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M62.6498 85.7998L34.7114 56.7259C28.1943 49.9431 25.1715 40.5576 26.4209 30.9749C27.7832 20.5272 34.1552 11.1295 43.9046 5.19567L44.0779 5.09106L46.2825 8.70368L46.1092 8.80828C37.3311 14.1508 31.8338 22.2168 30.6206 31.5219C29.5405 39.8294 32.1441 47.9478 37.7664 53.8012L65.7048 82.8751L62.6458 85.8038L62.6498 85.7998ZM43.9409 5.64216C34.3929 11.5197 28.154 20.7605 26.8199 31.0271C25.5866 40.4891 28.5691 49.754 35.0016 56.4482L62.6619 85.2326L65.1406 82.8631L37.4803 54.0787C31.7733 48.1408 29.1294 39.8978 30.2256 31.4697C31.4468 22.1002 36.9483 13.9778 45.7304 8.57089L43.9449 5.64619L43.9409 5.64216Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M61.686 84.4519L33.8847 55.5228C27.9117 49.3073 25.1791 40.4527 26.3802 31.224C27.7666 20.5913 34.1063 11.1173 43.7752 5.23169L44.4039 6.26149C35.0495 11.958 28.9193 21.1103 27.5812 31.381C26.4245 40.2476 29.0443 48.74 34.7593 54.69L62.5607 83.6191L61.6901 84.4559L61.686 84.4519Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M51.5745 1.1162C50.712 0.653554 49.6479 0.557074 48.6121 0.987531C47.3788 1.50649 46.5566 2.7536 46.5647 4.08922C46.5768 6.28174 48.5436 7.82256 50.595 7.43636C52.187 7.13463 53.3075 5.77085 53.3559 4.21798C53.368 3.90419 53.2752 3.59846 53.1261 3.3249L52.32 1.86451C52.1467 1.55072 51.8888 1.28919 51.5704 1.12022L51.5745 1.1162Z"
+        fill="#501464"
+      />
+      <path
+        d="M50.599 7.43641L47.0363 8.99325C46.4962 9.32715 45.7869 9.17031 45.4443 8.63928L43.7878 6.07257C43.4291 5.5174 43.6064 4.77313 44.1787 4.43922L47.0805 2.31519C47.2418 4.58414 48.3501 6.32205 50.599 7.43239V7.43641Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M50.5992 7.43617L47.0364 8.993C46.4963 9.32691 45.787 9.17006 45.4444 8.63903L43.7879 6.07233C43.4292 5.51716 43.6065 4.77289 44.1788 4.43898L47.0807 2.31494C47.2419 4.58389 48.3502 6.3218 50.5992 7.43214V7.43617Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M30.9149 27.6399C30.8706 27.6399 30.8262 27.6358 30.7819 27.6238C30.4554 27.5513 30.2499 27.2295 30.3225 26.9036C30.4353 26.4008 33.2364 14.4606 45.5934 7.66981C45.8876 7.50889 46.2544 7.61754 46.4156 7.9072C46.5769 8.20087 46.468 8.56698 46.1778 8.7279C34.3124 15.2451 31.5315 27.0484 31.5033 27.1651C31.4388 27.4467 31.189 27.6358 30.9149 27.6358V27.6399Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M230.111 207.696L149.786 133.299C149.758 131.629 149.319 129.831 148.48 128.073L148.319 127.731L120.002 81.8895C118.112 77.1061 115.004 72.3913 110.809 68.2396L102.502 60.0287C101.442 58.9787 99.7815 58.8258 98.5482 59.6666C96.924 60.7689 96.7104 63.0781 98.1049 64.458L105.815 72.0936C110.256 75.9114 112.489 82.324 112.489 82.324C114.774 88.5797 113.94 94.6101 110.095 98.617C109.978 98.7377 109.857 98.8623 109.732 98.979C109.696 99.0112 109.664 99.0474 109.632 99.0796C102.24 105.971 87.6341 103.835 77.6549 93.8337L68.3407 84.4963C66.8495 82.9998 64.5039 82.7786 62.7547 83.9654C60.4816 85.5102 60.1712 88.7326 62.1058 90.6837L70.63 99.2567C75.9501 104.607 82.1447 108.357 88.3716 110.465L139.702 139.659L140.041 139.796C141.222 140.267 142.374 140.492 143.45 140.488L223.59 214.712L230.111 207.696ZM116.737 106.232C116.737 106.232 116.753 106.216 116.761 106.204C116.77 106.196 116.778 106.188 116.786 106.18C116.806 106.16 116.822 106.14 116.838 106.124C117.052 105.907 117.257 105.681 117.455 105.456C117.58 105.311 117.705 105.166 117.825 105.021C117.926 104.901 118.023 104.78 118.12 104.659C118.329 104.394 118.531 104.12 118.724 103.843C118.744 103.815 118.769 103.782 118.789 103.754C119.615 102.555 120.284 101.28 120.8 99.9325C120.852 99.7917 120.905 99.6549 120.953 99.5141C121.026 99.3049 121.102 99.0957 121.167 98.8825C121.251 98.6169 121.332 98.3474 121.408 98.0779C121.429 98.0095 121.445 97.9411 121.461 97.8687C121.493 97.7399 121.529 97.6112 121.562 97.4825L141.379 130.145C141.419 130.298 141.427 130.503 141.286 130.688C141.149 130.873 140.972 130.893 140.835 130.873L107.415 111.551C111.087 110.541 114.267 108.747 116.741 106.236L116.737 106.232Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M97.3357 60.1777L68.3533 32.4273C62.0257 26.3687 53.4249 22.6837 43.4861 21.7785C33.0394 20.8251 21.6133 23.0216 10.4452 28.1348L8.84519 24.6549C20.6219 19.2641 32.7209 16.951 43.8367 17.9648C54.6501 18.9544 64.0449 22.9975 71.0094 29.6636L99.9916 57.414L97.3357 60.1777Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M97.3395 60.4632L97.1945 60.3225L68.2122 32.5721C61.9168 26.5457 53.3603 22.8807 43.4658 21.9755C33.0514 21.0261 21.6616 23.2186 10.5257 28.3157L10.3444 28.4002L8.57903 24.5542L8.76451 24.4697C20.5735 19.0629 32.7047 16.7417 43.8567 17.7635C54.7145 18.7572 64.1536 22.8204 71.1503 29.5186L100.278 57.4058L97.3436 60.4592L97.3395 60.4632ZM38.6496 21.36C40.2859 21.36 41.9061 21.4324 43.5021 21.5773C53.4853 22.4905 62.1264 26.1916 68.4903 32.2824L97.3275 59.892L99.7014 57.4179L70.8641 29.8082C63.936 23.1744 54.5816 19.1474 43.8125 18.1618C32.7894 17.156 20.791 19.433 9.10703 24.7513L10.5378 27.8652C19.9729 23.5727 29.5893 21.356 38.6455 21.356L38.6496 21.36Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M99.2497 61.2516L70.2674 33.5011C56.0161 19.8552 32.7125 17.4937 10.9043 27.4787L10.4005 26.3805C32.6642 16.1863 56.4917 18.6363 71.1057 32.6281L100.088 60.3785L99.2497 61.2476V61.2516Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M148.476 125.917L148.315 125.575L119.998 79.7332C118.108 74.9499 115 70.235 110.805 66.0833L102.498 57.8724C101.438 56.8224 99.7776 56.6696 98.5443 57.5104C96.9201 58.6127 96.7064 60.9218 98.1009 62.3017L105.811 69.9373C110.252 73.7551 112.485 80.1677 112.485 80.1677C114.77 86.4234 113.936 92.4538 110.091 96.4607C109.974 96.5814 109.853 96.7061 109.729 96.8228C109.692 96.855 109.66 96.8912 109.628 96.9234C102.236 103.815 87.6301 101.678 77.6509 91.6774L68.3407 82.3401C66.8495 80.8436 64.5039 80.6223 62.7547 81.8091C60.4816 83.3539 60.1712 86.5763 62.1058 88.5274L70.6301 97.1003C75.9501 102.451 82.1447 106.2 88.3716 108.308L139.702 137.503L140.041 137.64C143.539 139.04 146.796 138.292 148.537 135.753C150.234 133.275 150.193 129.509 148.476 125.917ZM141.282 128.528C141.145 128.713 140.968 128.733 140.831 128.713L107.411 109.391C111.083 108.381 114.263 106.587 116.737 104.076C116.745 104.068 116.753 104.06 116.761 104.048C116.77 104.04 116.778 104.032 116.786 104.024C116.806 104.004 116.822 103.984 116.838 103.968C117.052 103.75 117.257 103.525 117.455 103.3C117.58 103.155 117.705 103.01 117.825 102.865C117.926 102.745 118.023 102.624 118.12 102.503C118.329 102.238 118.531 101.964 118.724 101.687C118.744 101.658 118.769 101.626 118.789 101.598C119.615 100.399 120.284 99.1239 120.8 97.7762C120.852 97.6354 120.905 97.4987 120.953 97.3579C121.026 97.1487 121.102 96.9395 121.167 96.7262C121.251 96.4607 121.332 96.1912 121.408 95.9216C121.429 95.8533 121.445 95.7849 121.461 95.7124C121.493 95.5837 121.529 95.455 121.562 95.3263L141.379 127.989C141.419 128.142 141.427 128.347 141.286 128.532L141.282 128.528Z"
+        fill="#501464"
+      />
+      <path
+        d="M4.94323 32.4551C7.32717 32.4551 9.25982 30.526 9.25982 28.1465C9.25982 25.7669 7.32717 23.8379 4.94323 23.8379C2.55928 23.8379 0.626732 25.7669 0.626732 28.1465C0.626732 30.526 2.55928 32.4551 4.94323 32.4551Z"
+        fill="#501464"
+      />
+      <path
+        d="M3.28696 31.385C4.61137 31.385 5.685 30.3133 5.685 28.9913C5.685 27.6693 4.61137 26.5977 3.28696 26.5977C1.96254 26.5977 0.888916 27.6693 0.888916 28.9913C0.888916 30.3133 1.96254 31.385 3.28696 31.385Z"
+        fill="#501464"
+      />
+      <path
+        d="M6.76103 24.2362L10.4851 23.1459C11.0453 22.9287 11.6781 23.1982 11.9038 23.7534L12.992 26.4287C13.2298 27.008 12.9315 27.6677 12.3391 27.8769L9.03824 29.5224C9.31231 27.5632 8.55454 25.8012 6.76103 24.2362Z"
+        fill="#501464"
+      />
+      <path
+        d="M145.686 126.447L139.164 133.462L225.28 213.227L231.802 206.212L145.686 126.447Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M228.06 210.174L146.07 135.197C145.115 136.046 143.539 136.372 141.004 135.443C136.889 133.938 88.581 105.898 88.581 105.898C78.8518 105.371 65.3219 89.9392 60.9127 84.5806C60.6427 85.9524 61.0215 87.4368 62.1016 88.527L70.6259 97.1C75.946 102.451 82.1406 106.2 88.3675 108.308L139.698 137.503L140.037 137.639C141.58 138.259 143.08 138.456 144.422 138.267C144.422 138.267 144.426 138.267 144.43 138.267L225.287 213.159L228.06 210.178V210.174Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M105.811 69.9411C109.301 72.9423 111.429 77.5485 112.179 79.379C112.219 79.4715 112.255 79.5601 112.288 79.6446C112.288 79.6446 111.86 75.5572 109.769 72.3428C107.85 69.39 99.8097 61.6016 97.331 59.1274C97.198 59.747 96.8917 61.0785 98.1008 62.3015L105.811 69.9371V69.9411Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M6.76039 24.2362L10.4844 23.1459C11.0447 22.9287 11.6774 23.1982 11.9031 23.7534L12.9914 26.4287C13.2292 27.008 12.9309 27.6677 12.3384 27.8769L9.0376 29.5224C9.31166 27.5632 8.5539 25.8012 6.76039 24.2362Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M143.209 126.379L118.894 86.363C118.555 97.8768 112.707 106.112 98.9999 105.476C98.3349 105.38 107.411 109.39 107.411 109.39C111.083 108.381 114.263 106.586 116.738 104.076C116.746 104.068 116.754 104.06 116.762 104.048C116.77 104.04 116.778 104.032 116.786 104.024C116.806 104.004 116.822 103.984 116.838 103.968C117.052 103.75 117.257 103.525 117.455 103.3C117.58 103.155 117.705 103.01 117.826 102.865C117.926 102.745 118.023 102.624 118.12 102.503C118.329 102.238 118.531 101.964 118.724 101.687C118.745 101.658 118.769 101.626 118.789 101.598C119.615 100.399 120.284 99.1238 120.8 97.7761C120.853 97.6353 120.905 97.4986 120.953 97.3578C121.026 97.1486 121.102 96.9394 121.167 96.7262C121.251 96.4607 121.332 96.1911 121.409 95.9216C121.429 95.8532 121.445 95.7848 121.461 95.7124C121.485 95.6118 121.513 95.5153 121.538 95.4147C121.546 95.3865 121.554 95.3544 121.562 95.3262L141.379 127.989C141.419 128.142 141.427 128.347 141.286 128.532C141.149 128.717 140.972 128.737 140.835 128.717C144.728 129.888 143.213 126.383 143.213 126.383L143.209 126.379Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M18.4451 22.3215C18.1912 22.3215 17.9534 22.1605 17.8728 21.9071C17.7681 21.5893 17.9413 21.2513 18.2557 21.1467C18.562 21.0461 25.8208 18.6646 29.4118 18.5801H29.4278C29.7543 18.5801 30.0243 18.8416 30.0324 19.1714C30.0405 19.5053 29.7745 19.7789 29.4399 19.787C26.0303 19.8634 18.7112 22.2691 18.6346 22.2892C18.5701 22.3094 18.5056 22.3215 18.4451 22.3215Z"
+        fill="#DCC8F0"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M132.722 42.7378L141.343 53.7085C141.343 53.7085 149.162 52.8596 150.226 49.251L136.764 38.9521C136.764 38.9521 136.478 41.9453 132.726 42.7338L132.722 42.7378Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M132.722 42.7381L132.431 35.1548L137.578 35.73L135.628 41.2174C135.628 41.2174 133.391 42.8548 132.722 42.7381Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M136.974 38.3006C137.591 36.4098 138.743 32.8736 139.586 30.2788C140.061 28.8185 140.44 27.6558 140.569 27.2616C140.601 27.165 140.617 27.1167 140.617 27.1167H117.451L118.205 29.6149C120.663 31.027 124.065 31.9241 127.624 32.1936V43.0999L126.773 55.193C126.773 55.193 146.611 55.7602 149.021 49.7459L136.974 38.3006Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M133.495 33.0347C131.758 35.0301 131.972 38.0513 133.971 39.7852L192.097 89.9757L198.384 82.7505L140.258 32.56C138.259 30.8261 135.233 31.0393 133.495 33.0347Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M133.601 30.7453C136.228 30.3913 138.429 29.6591 140.098 28.7097C140.412 27.7401 140.617 27.1125 140.617 27.1125H117.451L117.729 28.0338C121.518 30.4355 127.918 31.5056 133.597 30.7413L133.601 30.7453Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M129.917 30.311C123.488 30.311 117.249 28.4524 114.081 25.3949C112.352 23.7254 111.55 21.734 111.76 19.634C111.969 17.5501 113.154 15.6996 115.186 14.2795C119.671 11.1416 128.276 10.2203 135.652 12.0869C142.362 13.7886 146.651 17.6507 146.328 21.7019C146.006 25.749 141.125 29.092 134.181 30.0254C132.77 30.2144 131.339 30.3069 129.917 30.3069V30.311ZM127.728 13.9456C123.367 13.9456 119.256 14.8709 116.802 16.5887C115.444 17.5381 114.694 18.6565 114.565 19.9157C114.44 21.1427 114.936 22.3053 116.04 23.3714C119.285 26.5012 126.918 28.1628 133.802 27.2375C138.336 26.63 143.281 24.4053 143.511 21.4806C143.684 19.2921 140.803 16.299 134.95 14.8145C132.625 14.2231 130.134 13.9415 127.724 13.9415L127.728 13.9456Z"
+        fill="#501464"
+      />
+      <path
+        d="M143.66 21.5249C143.434 24.3853 139.634 27.1973 133.596 28.0059C124.612 29.2128 113.815 25.8375 114.42 19.8513C115.016 13.9134 126.221 11.8577 134.801 14.0301C140.593 15.4985 143.886 18.6767 143.656 21.5249H143.66Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M129.916 28.4485C124.282 28.4485 118.716 26.8353 116.028 24.2365C114.665 22.921 114.057 21.4404 114.218 19.8272C114.379 18.214 115.286 16.8181 116.906 15.6837C120.8 12.9601 128.344 12.1796 134.849 13.829C140.403 15.2371 144.107 18.4031 143.857 21.533C143.607 24.6829 139.4 27.4226 133.62 28.199C132.403 28.364 131.154 28.4405 129.912 28.4405L129.916 28.4485ZM127.788 13.3745C123.564 13.3745 119.599 14.2957 117.14 16.0175C115.617 17.0836 114.77 18.379 114.621 19.8715C114.472 21.352 115.04 22.7238 116.31 23.9508C119.514 27.0444 126.934 28.7019 133.572 27.8088C139.158 27.0565 143.224 24.4698 143.462 21.5089C143.696 18.5762 140.117 15.583 134.757 14.2233C132.492 13.652 130.106 13.3745 127.792 13.3745H127.788Z"
+        fill="#501464"
+      />
+      <path
+        d="M132.589 14.931C129.989 17.9563 131.718 19.8833 141.338 22.4259C131.714 19.8793 127.829 20.4666 123.669 25.3063C127.833 20.4626 126.39 18.4713 119.623 16.6811C126.39 18.4713 129.989 17.9523 132.589 14.927V14.931Z"
+        fill="#CAFF8A"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M195.099 86.5198L136.973 36.3293C135.667 35.1988 133.926 34.9012 132.391 35.3799C132.125 36.969 132.661 38.6506 133.971 39.7851L192.096 89.9756L195.103 86.5198H195.099Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M200.097 75.497L200.895 75.1269C201.951 74.6361 203.205 74.8412 204.039 75.6538C204.502 76.1044 204.998 76.6515 205.409 77.2509C206.292 78.5463 205.929 80.3124 204.615 81.1733L204.345 81.3504L200.097 75.497Z"
+        fill="#501464"
+      />
+      <path
+        d="M175.879 83.9451L176.415 76.8767C176.524 75.4204 176.963 74.0003 177.729 72.7532C177.745 72.725 177.761 72.7009 177.777 72.6727C179.067 70.6009 181.154 69.1527 183.532 68.5895L188.635 67.3826L178.909 85.1802L175.879 83.9411V83.9451Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M179.002 85.4376L175.669 84.0738L176.218 76.8606C176.33 75.352 176.798 73.8957 177.56 72.6485L177.612 72.5641C178.906 70.4922 181.046 68.9716 183.492 68.3963L189.034 67.0889L179.006 85.4376H179.002ZM176.093 83.8123L178.821 84.9266L188.244 67.6843L183.581 68.7865C181.239 69.3417 179.184 70.794 177.95 72.7773L177.902 72.8537C177.169 74.0485 176.725 75.4405 176.617 76.8888L176.093 83.8082V83.8123Z"
+        fill="#501464"
+      />
+      <path
+        d="M217.843 96.2072L193.879 68.3844C193.125 67.101 191.102 67.0608 191.102 67.0608C183.726 67.3545 179.797 72.8055 177.084 79.0693C174.372 85.333 177.153 88.0325 177.153 88.0325L212.684 110.646L217.847 96.2112L217.843 96.2072Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M212.785 110.947L177.008 88.1733C176.891 88.0606 174.158 85.3089 176.895 78.9888C181.461 68.4446 187.184 67.0165 191.09 66.8596C191.19 66.8596 193.246 66.916 194.048 68.2838L218.069 96.1669L212.781 110.951L212.785 110.947ZM177.278 87.8716L212.576 110.336L217.614 96.2474L193.726 68.513C193.016 67.3142 191.114 67.2579 191.098 67.2579C183.267 67.5717 179.595 73.7751 177.27 79.1417C174.739 84.9911 177.084 87.6583 177.282 87.8675L177.278 87.8716Z"
+        fill="#501464"
+      />
+      <path
+        d="M220.862 103.328C220.567 107.222 218.068 110.654 215.03 111.016C211.676 111.418 208.98 107.994 209.335 103.336C209.689 98.6772 212.902 95.2497 216.194 95.6479C219.177 96.006 221.156 99.4335 220.862 103.328Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M214.51 111.249C213.321 111.249 212.18 110.782 211.261 109.901C209.73 108.437 208.936 105.979 209.137 103.32C209.339 100.64 210.52 98.1704 212.297 96.7181C213.494 95.7405 214.885 95.286 216.223 95.4509C219.246 95.817 221.374 99.2847 221.067 103.348C220.761 107.395 218.121 110.855 215.062 111.221C214.881 111.241 214.695 111.253 214.514 111.253L214.51 111.249ZM215.667 95.8169C214.59 95.8169 213.522 96.2313 212.547 97.0279C210.854 98.4158 209.73 100.777 209.536 103.352C209.343 105.89 210.093 108.228 211.539 109.612C212.527 110.553 213.728 110.971 215.01 110.819C217.887 110.473 220.37 107.178 220.664 103.316C220.954 99.4657 218.984 96.1871 216.174 95.8492C216.005 95.829 215.836 95.8169 215.671 95.8169H215.667Z"
+        fill="#501464"
+      />
+      <path
+        d="M176.294 81.4728L176.059 81.7998L209.273 105.561L209.508 105.234L176.294 81.4728Z"
+        fill="#501464"
+      />
+      <path
+        d="M212.611 100.6C210.874 102.595 211.088 105.617 213.087 107.351L271.213 157.541L277.5 150.316L219.374 100.125C217.375 98.3915 214.348 98.6047 212.611 100.6Z"
+        fill="#501464"
+      />
+      <g style={{ mixBlendMode: 'multiply' }}>
+        <path
+          d="M274.219 154.086L216.093 103.895C214.787 102.765 213.397 101.594 212.442 100.813C210.515 103.4 211.724 106.277 213.091 107.351L271.216 157.541L274.223 154.086H274.219Z"
+          fill="#DCC8F0"
+        />
+      </g>
+      <path
+        d="M189.836 90.2247C189.698 91.5683 188.582 92.3529 187.321 92.204C186.059 92.0592 184.745 90.9891 184.31 89.577C183.766 87.7949 184.769 86.1535 186.7 86.3828C188.627 86.6121 190.009 88.531 189.832 90.2247H189.836Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M187.623 92.4253C187.514 92.4253 187.405 92.4172 187.296 92.4052C185.894 92.2442 184.56 91.0775 184.116 89.6373C183.81 88.6356 183.963 87.6339 184.528 86.9621C185.039 86.3546 185.817 86.0771 186.724 86.1857C188.832 86.4351 190.21 88.535 190.033 90.2488C189.965 90.9206 189.654 91.508 189.162 91.9023C188.735 92.2442 188.195 92.4253 187.619 92.4253H187.623ZM186.353 86.5638C185.729 86.5638 185.197 86.7931 184.838 87.2195C184.362 87.7867 184.237 88.6476 184.503 89.5206C184.894 90.7959 186.116 91.8661 187.345 92.0069C187.933 92.0753 188.489 91.9264 188.913 91.5885C189.324 91.2586 189.574 90.7799 189.634 90.2046C189.791 88.6799 188.558 86.8052 186.676 86.5839C186.563 86.5719 186.458 86.5638 186.349 86.5638H186.353Z"
+        fill="#501464"
+      />
+      <path
+        d="M189.228 89.9392C189.082 91.3512 187.91 92.176 186.584 92.0231C185.258 91.8703 183.875 90.7478 183.42 89.2593C182.847 87.3846 183.903 85.6587 185.935 85.9001C187.962 86.1415 189.413 88.157 189.228 89.9392Z"
+        fill="#F8F4FC"
+      />
+      <path
+        d="M186.902 92.2405C186.789 92.2405 186.676 92.2325 186.563 92.2204C185.092 92.0515 183.694 90.8285 183.23 89.3159C182.908 88.2659 183.069 87.2158 183.658 86.5118C184.19 85.8721 185.008 85.5825 185.959 85.6952C188.172 85.9567 189.614 88.1612 189.429 89.9554C189.357 90.6595 189.034 91.275 188.518 91.6894C188.071 92.0474 187.507 92.2405 186.902 92.2405ZM185.568 86.0774C184.907 86.0774 184.347 86.3187 183.968 86.7693C183.464 87.3687 183.335 88.2779 183.613 89.1992C184.024 90.5428 185.31 91.6693 186.608 91.8181C187.233 91.8946 187.817 91.7336 188.264 91.3756C188.7 91.0256 188.966 90.5227 189.026 89.9153C189.191 88.3061 187.893 86.3308 185.906 86.0975C185.79 86.0854 185.677 86.0774 185.564 86.0774H185.568Z"
+        fill="#501464"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ui/links/AddressCopier.tsx b/src/components/ui/links/AddressCopier.tsx
index 574670596f..2c43915c30 100644
--- a/src/components/ui/links/AddressCopier.tsx
+++ b/src/components/ui/links/AddressCopier.tsx
@@ -1,10 +1,10 @@
-import { Flex, FlexProps, Text } from '@chakra-ui/react';
-import { Copy } from '@decent-org/fractal-ui';
+import { ButtonProps } from '@chakra-ui/react';
+import { CopySimple } from '@phosphor-icons/react';
 import { useCopyText } from '../../../hooks/utils/useCopyText';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
-import EtherscanLinkAddress from './EtherscanLinkAddress';
+import CeleryButtonWithIcon from '../utils/CeleryButtonWithIcon';
 
-interface Props extends FlexProps {
+interface AddressCopierProps extends ButtonProps {
   address: string;
 }
 
@@ -12,31 +12,22 @@ interface Props extends FlexProps {
  * A component that displays a truncated address, along with the "copy to clipboard"
  * icon to the right of it.
  */
-export default function AddressCopier({ address, ...rest }: Props) {
+export default function AddressCopier({ address, ...rest }: AddressCopierProps) {
   const { accountSubstring } = useDisplayName(address);
   const copyToClipboard = useCopyText();
 
   return (
-    <Flex
-      alignItems="center"
-      onClick={() => copyToClipboard(address)}
-      gap="0.5rem"
-      cursor="pointer"
-      w="fit-content"
-      color="grayscale.100"
+    <CeleryButtonWithIcon
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        copyToClipboard(address);
+      }}
+      width="fit-content"
       {...rest}
-    >
-      <EtherscanLinkAddress
-        address={address}
-        color="grayscale.100"
-      >
-        <Text textStyle="text-base-mono-regular">{accountSubstring}</Text>
-      </EtherscanLinkAddress>
-      <Copy
-        _hover={{ color: 'gold.500-hover' }}
-        boxSize="1.5rem"
-        fill="currentColor"
-      />
-    </Flex>
+      text={accountSubstring || address}
+      icon={CopySimple}
+      iconPosition="end"
+    />
   );
 }
diff --git a/src/components/ui/links/DisplayAddress.tsx b/src/components/ui/links/DisplayAddress.tsx
index 263e8cb438..9f31c240a8 100644
--- a/src/components/ui/links/DisplayAddress.tsx
+++ b/src/components/ui/links/DisplayAddress.tsx
@@ -1,29 +1,42 @@
-import { HStack, Text } from '@chakra-ui/react';
-import { ArrowAngleUp } from '@decent-org/fractal-ui';
+import { Flex, Text, Icon, LinkProps } from '@chakra-ui/react';
+import { ArrowUpRight } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
 import useDisplayName from '../../../hooks/utils/useDisplayName';
-import EtherscanLinkAddress from './EtherscanLinkAddress';
+import EtherscanLink from './EtherscanLink';
 
 export function DisplayAddress({
   address,
   truncate,
   children,
+  ...rest
 }: {
   address: string;
   truncate?: boolean | undefined;
   children?: ReactNode;
-}) {
+} & LinkProps) {
   const displayAddress = useDisplayName(address, truncate);
   return (
-    <EtherscanLinkAddress address={address}>
-      <HStack
-        color="gold.500"
-        _hover={{ color: 'gold.500-hover' }}
-        textStyle="text-base-sm-regular"
+    <EtherscanLink
+      {...rest}
+      type="address"
+      value={address}
+    >
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        minW="fit-content"
       >
-        <Text>{children || displayAddress.displayName}</Text>
-        <ArrowAngleUp />
-      </HStack>
-    </EtherscanLinkAddress>
+        <Text
+          as="span"
+          isTruncated
+        >
+          {children || displayAddress.displayName}
+        </Text>
+        <Icon
+          as={ArrowUpRight}
+          ml="0.5rem"
+        />
+      </Flex>
+    </EtherscanLink>
   );
 }
diff --git a/src/components/ui/links/DisplayTransaction.tsx b/src/components/ui/links/DisplayTransaction.tsx
index b34494b47c..bda8ca258b 100644
--- a/src/components/ui/links/DisplayTransaction.tsx
+++ b/src/components/ui/links/DisplayTransaction.tsx
@@ -1,20 +1,23 @@
-import { HStack, Text } from '@chakra-ui/react';
-import { ArrowAngleUp } from '@decent-org/fractal-ui';
+import { Flex, Text, Icon } from '@chakra-ui/react';
+import { ArrowUpRight } from '@phosphor-icons/react';
 import { createAccountSubstring } from '../../../hooks/utils/useDisplayName';
-import EtherscanLinkTransaction from './EtherscanLinkTransaction';
+import EtherscanLink from './EtherscanLink';
 
 export default function DisplayTransaction({ txHash }: { txHash: string }) {
   const displayName = createAccountSubstring(txHash);
   return (
-    <EtherscanLinkTransaction txHash={txHash}>
-      <HStack
-        color="gold.500"
-        _hover={{ color: 'gold.500-hover' }}
-        textStyle="text-base-sm-regular"
-      >
-        <Text>{displayName}</Text>
-        <ArrowAngleUp />
-      </HStack>
-    </EtherscanLinkTransaction>
+    <EtherscanLink
+      type="tx"
+      value={txHash}
+      pl={0}
+    >
+      <Flex alignItems="center">
+        <Text as="span">{displayName}</Text>
+        <Icon
+          as={ArrowUpRight}
+          ml="0.5rem"
+        />
+      </Flex>
+    </EtherscanLink>
   );
 }
diff --git a/src/components/ui/links/EtherscanLink.tsx b/src/components/ui/links/EtherscanLink.tsx
new file mode 100644
index 0000000000..2db8812ec3
--- /dev/null
+++ b/src/components/ui/links/EtherscanLink.tsx
@@ -0,0 +1,51 @@
+import { Box, LinkProps } from '@chakra-ui/react';
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import ModalTooltip from '../modals/ModalTooltip';
+import ExternalLink from './ExternalLink';
+
+export interface EtherscanLinkProps extends LinkProps {
+  type: 'address' | 'block' | 'token' | 'tx';
+  value: string | null;
+  secondaryValue?: string;
+}
+
+export default function EtherscanLink({
+  children,
+  type,
+  value,
+  secondaryValue,
+  ...rest
+}: EtherscanLinkProps) {
+  const { etherscanBaseURL } = useNetworkConfig();
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  if (!value) {
+    return null;
+  }
+  const href = `${etherscanBaseURL}/${type}/${value}${secondaryValue ? `?a=${secondaryValue}` : ''}`;
+
+  return (
+    <ExternalLink
+      href={href}
+      display="inline-flex"
+      {...rest}
+    >
+      <Box
+        ref={containerRef}
+        maxW="100%"
+        minW="fit-content"
+      >
+        <ModalTooltip
+          label={t('etherscanTip')}
+          placement="bottom"
+          containerRef={containerRef}
+        >
+          {children}
+        </ModalTooltip>
+      </Box>
+    </ExternalLink>
+  );
+}
diff --git a/src/components/ui/links/EtherscanLinkAddress.tsx b/src/components/ui/links/EtherscanLinkAddress.tsx
deleted file mode 100644
index cce4e75c36..0000000000
--- a/src/components/ui/links/EtherscanLinkAddress.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { LinkProps } from '@chakra-ui/react';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import EtherscanLinkBase from './EtherscanLinkBase';
-
-interface Props extends LinkProps {
-  address?: string | null;
-  children: React.ReactNode;
-}
-
-/**
- * An address link to Etherscan.
- *
- * For most use cases, you probably want to use DisplayAddress,
- * to add proper styling.
- */
-export default function EtherscanLinkAddress({ address, children, ...rest }: Props) {
-  const { etherscanBaseURL } = useNetworkConfig();
-
-  if (!address) {
-    return null;
-  }
-
-  return (
-    <EtherscanLinkBase
-      href={`${etherscanBaseURL}/address/${address}`}
-      {...rest}
-    >
-      {children}
-    </EtherscanLinkBase>
-  );
-}
diff --git a/src/components/ui/links/EtherscanLinkBase.tsx b/src/components/ui/links/EtherscanLinkBase.tsx
deleted file mode 100644
index fedc6a25bd..0000000000
--- a/src/components/ui/links/EtherscanLinkBase.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Box, LinkProps } from '@chakra-ui/react';
-import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import ModalTooltip from '../modals/ModalTooltip';
-import ExternalLink from './ExternalLink';
-
-/**
- * The default link function for Etherscan links.
- *
- * Handles displaying the tooltip.
- */
-export default function EtherscanBase({ children, ...rest }: LinkProps) {
-  const { t } = useTranslation();
-  const containerRef = useRef<HTMLDivElement>(null);
-  return (
-    <ExternalLink {...rest}>
-      <Box ref={containerRef}>
-        <ModalTooltip
-          label={t('etherscanTip')}
-          placement="bottom"
-          containerRef={containerRef}
-        >
-          {/* Box here allows multiple children to be wrapped by a single tooltip */}
-          <Box>{children}</Box>
-        </ModalTooltip>
-      </Box>
-    </ExternalLink>
-  );
-}
diff --git a/src/components/ui/links/EtherscanLinkBlock.tsx b/src/components/ui/links/EtherscanLinkBlock.tsx
deleted file mode 100644
index f1fcbf313d..0000000000
--- a/src/components/ui/links/EtherscanLinkBlock.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { LinkProps } from '@chakra-ui/react';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import EtherscanLinkBase from './EtherscanLinkBase';
-
-interface Props extends LinkProps {
-  blockNumber?: string | null;
-  children: React.ReactNode;
-}
-
-/**
- * A block link to Etherscan.
- */
-export default function EtherscanLinkBlock({ blockNumber, children, ...rest }: Props) {
-  const { etherscanBaseURL } = useNetworkConfig();
-
-  if (!blockNumber) {
-    return null;
-  }
-
-  return (
-    <EtherscanLinkBase
-      href={`${etherscanBaseURL}/block/${blockNumber}`}
-      {...rest}
-    >
-      {children}
-    </EtherscanLinkBase>
-  );
-}
diff --git a/src/components/ui/links/EtherscanLinkERC20.tsx b/src/components/ui/links/EtherscanLinkERC20.tsx
deleted file mode 100644
index 8b854d1ea6..0000000000
--- a/src/components/ui/links/EtherscanLinkERC20.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { LinkProps } from '@chakra-ui/react';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import EtherscanLinkBase from './EtherscanLinkBase';
-
-interface Props extends LinkProps {
-  address?: string | null;
-  children: React.ReactNode;
-}
-
-function EtherscanLinkERC20({ address, children, ...rest }: Props) {
-  const { etherscanBaseURL } = useNetworkConfig();
-
-  if (!address) {
-    return null;
-  }
-
-  return (
-    <EtherscanLinkBase
-      href={`${etherscanBaseURL}/token/${address}`}
-      {...rest}
-    >
-      {children}
-    </EtherscanLinkBase>
-  );
-}
-
-export default EtherscanLinkERC20;
diff --git a/src/components/ui/links/EtherscanLinkERC721.tsx b/src/components/ui/links/EtherscanLinkERC721.tsx
deleted file mode 100644
index 25e9e7da85..0000000000
--- a/src/components/ui/links/EtherscanLinkERC721.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { LinkProps } from '@chakra-ui/react';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import EtherscanLinkBase from './EtherscanLinkBase';
-
-interface Props extends LinkProps {
-  address?: string | null;
-  tokenId?: string | null;
-  children: React.ReactNode;
-}
-
-export default function EtherscanLinkERC721({ address, tokenId, children, ...rest }: Props) {
-  const { etherscanBaseURL } = useNetworkConfig();
-
-  if (!address || !tokenId) {
-    return null;
-  }
-
-  return (
-    <EtherscanLinkBase
-      href={`${etherscanBaseURL}/token/${address}/?a=${tokenId}`}
-      {...rest}
-    >
-      {children}
-    </EtherscanLinkBase>
-  );
-}
diff --git a/src/components/ui/links/EtherscanLinkTransaction.tsx b/src/components/ui/links/EtherscanLinkTransaction.tsx
deleted file mode 100644
index 68ecad6d65..0000000000
--- a/src/components/ui/links/EtherscanLinkTransaction.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { LinkProps } from '@chakra-ui/react';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import EtherscanLinkBase from './EtherscanLinkBase';
-
-interface Props extends LinkProps {
-  txHash?: string | null;
-  children: React.ReactNode;
-}
-
-/**
- * A transaction link to Etherscan.
- *
- * For most use cases, you probably want to use DisplayTransaction,
- * to add proper styling.
- */
-export default function EtherscanLinkTransaction({ txHash, children, ...rest }: Props) {
-  const { etherscanBaseURL } = useNetworkConfig();
-
-  if (!txHash) {
-    return null;
-  }
-
-  return (
-    <EtherscanLinkBase
-      href={`${etherscanBaseURL}/tx/${txHash}`}
-      {...rest}
-    >
-      {children}
-    </EtherscanLinkBase>
-  );
-}
diff --git a/src/components/ui/links/ExternalLink.tsx b/src/components/ui/links/ExternalLink.tsx
index dc1b9181bb..10f62502c3 100644
--- a/src/components/ui/links/ExternalLink.tsx
+++ b/src/components/ui/links/ExternalLink.tsx
@@ -1,13 +1,25 @@
 import { Link, LinkProps } from '@chakra-ui/react';
+import { Ref } from 'react';
 
-export default function ExternalLink({ children, ...rest }: LinkProps) {
+export default function ExternalLink({
+  children,
+  internalRef,
+  ...rest
+}: LinkProps & { internalRef?: Ref<any> }) {
   return (
     <Link
-      color="gold.500"
-      _hover={{ color: 'gold.500-hover' }}
+      color="celery-0"
+      padding="0.25rem 0.75rem"
+      gap="0.25rem"
+      borderRadius="625rem"
+      borderColor="transparent"
+      borderWidth="1px"
+      _hover={{ bg: 'celery--6', borderColor: 'celery--6' }}
+      _active={{ bg: 'celery--6', borderWidth: '1px', borderColor: 'celery--5' }}
       target="_blank"
       rel="noreferrer"
       textDecoration="none"
+      ref={internalRef}
       {...rest}
     >
       {children}
diff --git a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx b/src/components/ui/menus/AccountDisplay/AccountMenuButton.tsx
similarity index 62%
rename from src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx
rename to src/components/ui/menus/AccountDisplay/AccountMenuButton.tsx
index 91030b445a..be2840ec97 100644
--- a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx
+++ b/src/components/ui/menus/AccountDisplay/AccountMenuButton.tsx
@@ -1,25 +1,28 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
-import { ArrowDown } from '@decent-org/fractal-ui';
+import { Box, Flex, Icon } from '@chakra-ui/react';
+import { CaretDown } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import useAvatar from '../../../../hooks/utils/useAvatar';
 import useDisplayName from '../../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import Avatar from '../../page/Header/Avatar';
 
-export function NotConnected() {
+function ConnectWalletButton() {
   const { t } = useTranslation('menu');
   return (
     <Flex
       alignItems="center"
       gap="1"
     >
-      <Text textStyle="text-sm-mono-medium">{t('connectWallet')}</Text>
-      <ArrowDown fill="currentColor" />
+      {t('connectWallet')}
+      <Icon
+        as={CaretDown}
+        boxSize="1.5rem"
+      />
     </Flex>
   );
 }
 
-export function Connected() {
+function WalletMenuButton() {
   const {
     readOnly: { user },
   } = useFractal();
@@ -36,24 +39,25 @@ export function Connected() {
       alignItems="center"
       gap="0.75rem"
     >
-      <Box mt="0.125rem">
+      <Box>
         <Avatar
           address={account}
           url={avatarURL}
         />
       </Box>
-      <Text textStyle="text-sm-mono-semibold">{accountDisplayName}</Text>
-      <ArrowDown fill="currentColor" />
+      {accountDisplayName}
+      <Icon
+        as={CaretDown}
+        boxSize="1.5rem"
+      />
     </Flex>
   );
 }
 
-export function MenuButtonDisplay() {
+export function AccountMenuButton() {
   const {
     readOnly: { user },
   } = useFractal();
-  if (!user.address) {
-    return <NotConnected />;
-  }
-  return <Connected />;
+
+  return user.address ? <WalletMenuButton /> : <ConnectWalletButton />;
 }
diff --git a/src/components/ui/menus/AccountDisplay/ConnectedWalletMenuItem.tsx b/src/components/ui/menus/AccountDisplay/ConnectedWalletMenuItem.tsx
new file mode 100644
index 0000000000..f113a1cb37
--- /dev/null
+++ b/src/components/ui/menus/AccountDisplay/ConnectedWalletMenuItem.tsx
@@ -0,0 +1,71 @@
+import { Box, Button, Flex, MenuItem, Text } from '@chakra-ui/react';
+import { CopySimple } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+import useAvatar from '../../../../hooks/utils/useAvatar';
+import { useCopyText } from '../../../../hooks/utils/useCopyText';
+import useDisplayName from '../../../../hooks/utils/useDisplayName';
+import { useFractal } from '../../../../providers/App/AppProvider';
+import Avatar from '../../page/Header/Avatar';
+
+/**
+ * Display to show a users connected wallet information
+ * Allows for copying of address
+ */
+export function ConnectedWalletMenuItem() {
+  const {
+    readOnly: { user },
+  } = useFractal();
+  const account = user.address;
+  const { displayName: accountDisplayName } = useDisplayName(account);
+  const avatarURL = useAvatar(accountDisplayName);
+  const copyTextToClipboard = useCopyText();
+  const { t } = useTranslation('menu');
+
+  if (!account) {
+    return null;
+  }
+  return (
+    <Box
+      data-testid="accountMenu-wallet"
+      cursor="default"
+      pt="0.5rem"
+    >
+      <Text
+        px="0.5rem"
+        textStyle="helper-text-small"
+        color="neutral-7"
+      >
+        {t('wallet')}
+      </Text>
+      <MenuItem
+        as={Button}
+        variant="tertiary"
+        alignItems="center"
+        aria-label="copy address"
+        data-testid="walletmenu-copyAddress"
+        onClick={() => copyTextToClipboard(account)}
+        whiteSpace="pre-wrap"
+        wordBreak="break-all"
+        h="3rem"
+        textOverflow="ellipsis"
+        rightIcon={
+          <Avatar
+            size="lg"
+            address={account}
+            url={avatarURL}
+            data-testid="walletMenu-avatar"
+          />
+        }
+      >
+        <Flex
+          alignItems="center"
+          gap={2}
+          w="full"
+        >
+          {accountDisplayName}
+          <CopySimple size="1.5rem" />
+        </Flex>
+      </MenuItem>
+    </Box>
+  );
+}
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx b/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx
index 7c869082be..08da2928da 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx
+++ b/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx
@@ -1,5 +1,4 @@
-import { Flex, MenuItem, Text } from '@chakra-ui/react';
-import { Fragment } from 'react';
+import { Box, Button, MenuItem, Text } from '@chakra-ui/react';
 
 /**
  * Used to display a simple clickable item to the menu.
@@ -17,27 +16,24 @@ export function MenuItemButton({
   onClick?: () => void;
 }) {
   return (
-    <Fragment>
+    <Box>
       <MenuItem
+        as={Button}
+        variant="tertiary"
         cursor="pointer"
-        p="1.5rem"
         data-testid={testId}
         onClick={onClick}
-        border="1px solid"
-        borderColor="chocolate.700"
-        _hover={{
-          color: 'gold.500-hover',
-        }}
+        h="3rem"
+        justifyContent="space-between"
+        rightIcon={
+          <Icon
+            size="1.5rem"
+            data-testid="walletMenu-avatar"
+          />
+        }
       >
-        <Flex
-          alignItems="center"
-          justifyContent="space-between"
-          w="full"
-        >
-          <Text textStyle="text-base-mono-medium">{label}</Text>
-          <Icon boxSize="1.5rem" />
-        </Flex>
+        <Text textStyle="button-base">{label}</Text>
       </MenuItem>
-    </Fragment>
+    </Box>
   );
 }
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
deleted file mode 100644
index b86d21dd58..0000000000
--- a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Box, Flex, Select, Text } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import { useSwitchChain } from 'wagmi';
-import {
-  supportedNetworks,
-  useNetworkConfig,
-} from '../../../../providers/NetworkConfig/NetworkConfigProvider';
-
-/**
- * Network display for menu
- */
-export function MenuItemNetwork() {
-  const { t } = useTranslation('menu');
-  const { chain } = useNetworkConfig();
-  const { switchChain } = useSwitchChain();
-
-  return (
-    <Box
-      cursor="default"
-      p="1rem 1.5rem"
-    >
-      <Flex
-        direction="column"
-        gap="2"
-      >
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="chocolate.100"
-        >
-          {t('network')}
-        </Text>
-        <Select
-          mt={4}
-          width="100%"
-          bgColor="#2c2c2c"
-          borderColor="#4d4d4d"
-          data-testid="accountMenu-network"
-          rounded="sm"
-          cursor="pointer"
-          onChange={async e => {
-            e.preventDefault();
-            switchChain({ chainId: Number(e.target.value) });
-          }}
-          value={chain.id}
-        >
-          {supportedNetworks.map(network => (
-            <option
-              key={network.chain.id}
-              value={network.chain.id}
-            >
-              {network.chain.name}
-            </option>
-          ))}
-        </Select>
-      </Flex>
-    </Box>
-  );
-}
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
deleted file mode 100644
index 10b4657bae..0000000000
--- a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Box, Flex, MenuItem, Text } from '@chakra-ui/react';
-import { Copy } from '@decent-org/fractal-ui';
-import { useTranslation } from 'react-i18next';
-import useAvatar from '../../../../hooks/utils/useAvatar';
-import { useCopyText } from '../../../../hooks/utils/useCopyText';
-import useDisplayName from '../../../../hooks/utils/useDisplayName';
-import { useFractal } from '../../../../providers/App/AppProvider';
-import EtherscanLinkAddress from '../../links/EtherscanLinkAddress';
-import Avatar from '../../page/Header/Avatar';
-
-/**
- * Display to show a users connected wallet information
- * Allows for copying of address
- */
-export function MenuItemWallet() {
-  const {
-    readOnly: { user },
-  } = useFractal();
-  const account = user.address;
-  const { displayName: accountDisplayName } = useDisplayName(account);
-  const avatarURL = useAvatar(account);
-  const copyTextToClipboard = useCopyText();
-  const { t } = useTranslation('menu');
-
-  if (!account) {
-    return null;
-  }
-  return (
-    <Box
-      data-testid="accountMenu-wallet"
-      bg="black.900"
-      cursor="default"
-      p="1rem 1.5rem"
-      borderBottomRadius="lg"
-    >
-      <Flex
-        alignItems="center"
-        justifyContent="space-between"
-        w="full"
-      >
-        <Flex
-          direction="column"
-          gap="2"
-        >
-          <Text
-            textStyle="text-sm-sans-regular"
-            color="chocolate.100"
-          >
-            {t('wallet')}
-          </Text>
-          <MenuItem
-            padding={0}
-            alignItems="center"
-            gap="2"
-            aria-label="copy address"
-            data-testid="walletmenu-copyAddress"
-            onClick={() => copyTextToClipboard(account)}
-            cursor="pointer"
-          >
-            <Text
-              maxWidth="8rem"
-              whiteSpace="nowrap"
-              overflowX="hidden"
-              textOverflow="ellipsis"
-              data-testid="walletMenu-accountDisplay"
-              textStyle="text-base-mono-medium"
-              color="grayscale.100"
-            >
-              {accountDisplayName}
-            </Text>
-            <Copy boxSize="1.5rem" />
-          </MenuItem>
-        </Flex>
-        <EtherscanLinkAddress address={account}>
-          <Avatar
-            size="lg"
-            address={account}
-            url={avatarURL}
-            data-testid="walletMenu-avatar"
-          />
-        </EtherscanLinkAddress>
-      </Flex>
-    </Box>
-  );
-}
diff --git a/src/components/ui/menus/AccountDisplay/NetworkSelector.tsx b/src/components/ui/menus/AccountDisplay/NetworkSelector.tsx
new file mode 100644
index 0000000000..fd6ee7b400
--- /dev/null
+++ b/src/components/ui/menus/AccountDisplay/NetworkSelector.tsx
@@ -0,0 +1,74 @@
+import { Box, Flex, Icon, Text } from '@chakra-ui/react';
+import { CaretDown } from '@phosphor-icons/react';
+import { RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSwitchChain } from 'wagmi';
+import {
+  supportedNetworks,
+  useNetworkConfig,
+} from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { OptionMenu } from '../OptionMenu';
+
+/**
+ * Network display for menu
+ */
+export function NetworkSelector({
+  containerRef,
+}: {
+  containerRef: RefObject<HTMLDivElement | null>;
+}) {
+  const { t } = useTranslation('menu');
+  const { chain } = useNetworkConfig();
+  const { switchChain } = useSwitchChain();
+  const networksOptions = supportedNetworks.map(network => ({
+    optionKey: network.chain.name,
+    onClick: () => switchChain({ chainId: network.chain.id }),
+  }));
+
+  return (
+    <Box
+      cursor="default"
+      pt="0.5rem"
+    >
+      <Flex
+        direction="column"
+        gap="2"
+      >
+        <Text
+          px="0.5rem"
+          textStyle="helper-text-small"
+          color="neutral-7"
+        >
+          {t('network')}
+        </Text>
+        <OptionMenu
+          namespace="menu"
+          matchWidth
+          menuListMr="0"
+          options={networksOptions}
+          containerRef={containerRef}
+          buttonProps={{
+            w: 'full',
+            borderRadius: '4px',
+            _hover: { color: 'lilac--1', bg: 'white-alpha-04' },
+          }}
+          trigger={
+            <Flex
+              w="full"
+              justifyContent="space-between"
+              alignItems="center"
+              py="0.75rem"
+              px="1rem"
+            >
+              {chain.name}
+              <Icon
+                as={CaretDown}
+                boxSize="1.5rem"
+              />
+            </Flex>
+          }
+        />
+      </Flex>
+    </Box>
+  );
+}
diff --git a/src/components/ui/menus/AccountDisplay/MenuItems.tsx b/src/components/ui/menus/AccountDisplay/WalletMenu.tsx
similarity index 51%
rename from src/components/ui/menus/AccountDisplay/MenuItems.tsx
rename to src/components/ui/menus/AccountDisplay/WalletMenu.tsx
index e295992612..53d6969ad1 100644
--- a/src/components/ui/menus/AccountDisplay/MenuItems.tsx
+++ b/src/components/ui/menus/AccountDisplay/WalletMenu.tsx
@@ -1,14 +1,17 @@
 import { MenuList } from '@chakra-ui/react';
-import { Connect, Disconnect } from '@decent-org/fractal-ui';
+import { Link, Plugs } from '@phosphor-icons/react';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
+import { RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDisconnect } from 'wagmi';
+import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common';
 import { useFractal } from '../../../../providers/App/AppProvider';
+import Divider from '../../utils/Divider';
+import { ConnectedWalletMenuItem } from './ConnectedWalletMenuItem';
 import { MenuItemButton } from './MenuItemButton';
-import { MenuItemNetwork } from './MenuItemNetwork';
-import { MenuItemWallet } from './MenuItemWallet';
+import { NetworkSelector } from './NetworkSelector';
 
-export function MenuItems() {
+export function WalletMenu({ containerRef }: { containerRef: RefObject<HTMLDivElement | null> }) {
   const {
     readOnly: { user },
   } = useFractal();
@@ -18,29 +21,28 @@ export function MenuItems() {
 
   return (
     <MenuList
-      p="0"
       w="16.25rem"
-      rounded="lg"
-      shadow="menu-gold"
-      mr={['auto', '1rem']}
-      bg="grayscale.black"
-      border="none"
-      sx={{
-        '& > :nth-of-type(1)': {
-          borderTopRadius: 'lg',
-        },
-        '& > :last-child': {
-          borderBottomRadius: 'lg',
-        },
-      }}
+      rounded="0.5rem"
+      bg={NEUTRAL_2_82_TRANSPARENT}
+      backdropFilter="auto"
+      backdropBlur="10px"
+      border="1px solid"
+      borderColor="neutral-3"
+      zIndex={1}
     >
-      {user.address && <MenuItemWallet />}
-      <MenuItemNetwork />
+      {user.address && (
+        <>
+          <ConnectedWalletMenuItem />
+          <Divider />
+        </>
+      )}
+      <NetworkSelector containerRef={containerRef} />
+      <Divider />
       {!user.address && (
         <MenuItemButton
           testId="accountMenu-connect"
           label={t('connect')}
-          Icon={Connect}
+          Icon={Link}
           onClick={() => open()}
         />
       )}
@@ -48,7 +50,7 @@ export function MenuItems() {
         <MenuItemButton
           testId="accountMenu-disconnect"
           label={t('disconnect')}
-          Icon={Disconnect}
+          Icon={Plugs}
           onClick={disconnect}
         />
       )}
diff --git a/src/components/ui/menus/AccountDisplay/index.tsx b/src/components/ui/menus/AccountDisplay/index.tsx
index d4e1da528c..422f40e058 100644
--- a/src/components/ui/menus/AccountDisplay/index.tsx
+++ b/src/components/ui/menus/AccountDisplay/index.tsx
@@ -1,21 +1,31 @@
-import { Menu, MenuButton } from '@chakra-ui/react';
-import { Fragment } from 'react';
-import { MenuButtonDisplay } from './MenuButtonDisplay';
-import { MenuItems } from './MenuItems';
+import { Button, Menu, MenuButton, Portal } from '@chakra-ui/react';
+import { RefObject } from 'react';
+import { AccountMenuButton } from './AccountMenuButton';
+import { WalletMenu } from './WalletMenu';
 
-export function AccountDisplay() {
+interface AccountDisplayProps {
+  containerRef: RefObject<HTMLDivElement | null>;
+}
+
+export function AccountDisplay({ containerRef }: AccountDisplayProps) {
   return (
-    <Menu>
-      <Fragment>
-        <MenuButton
-          data-testid="header-accountMenu"
-          pr="1rem"
-          _hover={{ color: 'gold.200' }}
-        >
-          <MenuButtonDisplay />
-        </MenuButton>
-        <MenuItems />
-      </Fragment>
+    // Portal here needed in order to
+    <Menu
+      placement="bottom-end"
+      offset={[0, 16]}
+    >
+      <Button
+        as={MenuButton}
+        variant="tertiary"
+        data-testid="header-accountMenu"
+        pr="1rem"
+      >
+        <AccountMenuButton />
+      </Button>
+
+      <Portal containerRef={containerRef}>
+        <WalletMenu containerRef={containerRef} />
+      </Portal>
     </Menu>
   );
 }
diff --git a/src/components/ui/menus/DAOSearch/SearchDisplay.tsx b/src/components/ui/menus/DAOSearch/SearchDisplay.tsx
index 85f64cc4ad..ecebba94d5 100644
--- a/src/components/ui/menus/DAOSearch/SearchDisplay.tsx
+++ b/src/components/ui/menus/DAOSearch/SearchDisplay.tsx
@@ -1,9 +1,10 @@
-import { Box, Flex, Text, Button } from '@chakra-ui/react';
+import { Flex, Text, Spinner, Button, Icon } from '@chakra-ui/react';
+import { WarningCircle } from '@phosphor-icons/react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../../constants/routes';
-import useDisplayName from '../../../../hooks/utils/useDisplayName';
+import useDAOName from '../../../../hooks/DAO/useDAOName';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 
@@ -17,8 +18,8 @@ interface ISearchDisplay {
 }
 
 function DAONameDisplay({ address }: { address: string }) {
-  const { displayName } = useDisplayName(address);
-  return <Text textStyle="text-base-sans-medium">{displayName}</Text>;
+  const { daoRegistryName } = useDAOName({ address });
+  return <Text textStyle="display-lg">{daoRegistryName}</Text>;
 }
 
 export function SearchDisplay({
@@ -38,16 +39,38 @@ export function SearchDisplay({
   }, [node, address]);
   if (loading && address) {
     return (
-      <Box>
-        <Text textStyle="text-base-mono-regular">{t('loading')}</Text>
-      </Box>
+      <Flex
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Spinner
+          thickness="4px"
+          speed="0.75s"
+          emptyColor="neutral-3"
+          color="neutral-7"
+          size="lg"
+        />
+      </Flex>
     );
   }
   if (errorMessage && !loading) {
     return (
-      <Box>
-        <Text textStyle="text-base-sans-medium">{errorMessage}</Text>
-      </Box>
+      <Flex
+        alignItems="center"
+        gap="2"
+      >
+        <Icon
+          as={WarningCircle}
+          color="red-1"
+          boxSize="1.5rem"
+        />
+        <Text
+          textStyle="display-lg"
+          color="red-1"
+        >
+          {errorMessage}
+        </Text>
+      </Flex>
     );
   }
   if (validAddress && address && !loading) {
@@ -56,15 +79,20 @@ export function SearchDisplay({
         py={2}
         cursor={isCurrentSafe ? 'not-allowed' : 'default'}
         justifyContent="space-between"
+        gap={8}
+        w="full"
       >
         <Flex
           justifyContent="space-between"
           alignItems="center"
         >
-          <Flex flexDirection="column">
+          <Flex
+            flexDirection="column"
+            gap={2}
+          >
             <Text
-              textStyle="text-sm-sans-regular"
-              color="chocolate.100"
+              textStyle="label-base"
+              color="white-0"
             >
               {t(isCurrentSafe ? 'labelCurrentDAO' : 'labelDAOFound')}
             </Text>
@@ -78,7 +106,10 @@ export function SearchDisplay({
             onClick={() => {
               onClickView();
               if (closeDrawer) closeDrawer();
+
+              // TODO is this needed here?
               action.resetDAO();
+
               navigate(DAO_ROUTES.dao.relative(addressPrefix, address));
             }}
           >
diff --git a/src/components/ui/menus/DAOSearch/index.tsx b/src/components/ui/menus/DAOSearch/index.tsx
index 9b29f754b0..716efc299d 100644
--- a/src/components/ui/menus/DAOSearch/index.tsx
+++ b/src/components/ui/menus/DAOSearch/index.tsx
@@ -2,13 +2,11 @@ import {
   Box,
   Input,
   InputGroup,
-  InputLeftElement,
   Popover,
   PopoverTrigger,
   useDisclosure,
   useOutsideClick,
 } from '@chakra-ui/react';
-import { Search } from '@decent-org/fractal-ui';
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchDao } from '../../../../hooks/DAO/useSearchDao';
@@ -40,8 +38,7 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) {
     <Box
       ref={ref}
       width="full"
-      maxW={{ base: 'full', md: '31.125rem' }}
-      height="4rem"
+      position="relative"
     >
       <Popover
         matchWidth
@@ -53,32 +50,28 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) {
             flexDirection="column"
             justifyContent="center"
           >
-            <InputLeftElement mt="3">
-              <Search
-                boxSize="1.5rem"
-                color="grayscale.300"
-              />
-            </InputLeftElement>
             <Input
-              size="baseAddonLeft"
               placeholder={t('searchDAOPlaceholder')}
               onChange={e => setLocalInput(e.target.value.trim())}
               value={localInput}
               spellCheck="false"
+              isInvalid={!!errorMessage}
               data-testid="search-input"
             />
           </InputGroup>
         </PopoverTrigger>
         <Box
-          marginTop="0.5rem"
+          marginTop="1.25rem"
           padding="1rem 1rem"
-          border="none"
-          rounded="lg"
-          shadow="menu-gold"
-          bg="grayscale.black"
+          rounded="0.5rem"
+          bg="neutral-3"
+          boxShadow="0px 1px 0px 0px var(--chakra-colors-neutral-1)"
+          border="1px solid"
+          borderColor={!!errorMessage ? 'red-1' : 'neutral-3'}
+          position="absolute"
           hidden={!errorMessage && !address}
-          position="relative"
           zIndex="modal"
+          w="full"
         >
           <SearchDisplay
             loading={isLoading}
diff --git a/src/components/ui/menus/FavoritesMenu/Favorite.tsx b/src/components/ui/menus/FavoritesMenu/Favorite.tsx
index 6ccb8f0700..aafec09106 100644
--- a/src/components/ui/menus/FavoritesMenu/Favorite.tsx
+++ b/src/components/ui/menus/FavoritesMenu/Favorite.tsx
@@ -1,5 +1,6 @@
-import { MenuItem, Text } from '@chakra-ui/react';
-import { StarGoldSolid } from '@decent-org/fractal-ui';
+import { Box, Button, MenuItem, Text } from '@chakra-ui/react';
+import { Star } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import useDAOName from '../../../../hooks/DAO/useDAOName';
@@ -14,39 +15,39 @@ export function Favorite({ network, address }: IFavorite) {
   const { action } = useFractal();
   const navigate = useNavigate();
 
+  const { t } = useTranslation('dashboard');
+
   const onClickNav = () => {
+    // TODO is this needed here?
     action.resetDAO();
+
     navigate(DAO_ROUTES.dao.relative(network, address));
   };
 
   return (
-    <MenuItem
-      display="flex"
-      alignItems="center"
-      gap="2"
-      my={1}
-      width="full"
-      px="0px"
-      onClick={onClickNav}
-      data-testid={'favorites-' + daoRegistryName}
-    >
-      <StarGoldSolid
-        color="gold.500"
-        _hover={{
-          color: 'gold.500-hover',
-        }}
-      />
-      <Text
-        maxWidth="9rem"
+    <Box>
+      <MenuItem
+        as={Button}
+        variant="tertiary"
+        w="full"
+        h="3rem"
+        onClick={onClickNav}
         noOfLines={1}
-        color="grayscale.100"
-        textStyle="text-base-sans-medium"
-        _hover={{
-          color: 'gold.500-hover',
-        }}
+        data-testid={'favorites-' + daoRegistryName}
+        display="flex"
+        alignItems="center"
+        justifyContent="flex-start"
+        gap={2}
       >
-        {daoRegistryName}
-      </Text>
-    </MenuItem>
+        <Star
+          size="1.5rem"
+          weight="fill"
+        />
+
+        <Text color={daoRegistryName ? 'white-0' : 'neutral-6'}>
+          {daoRegistryName ? daoRegistryName : t('loadingFavorite')}
+        </Text>
+      </MenuItem>
+    </Box>
   );
 }
diff --git a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
index c3227c02af..c5f160856b 100644
--- a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
+++ b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx
@@ -1,5 +1,6 @@
 import { Box, MenuList } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common';
 import { useAccountFavorites } from '../../../../hooks/DAO/loaders/useFavorites';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { Favorite } from './Favorite';
@@ -11,36 +12,34 @@ export function FavoritesList() {
   const { t } = useTranslation('dashboard');
   return (
     <MenuList
-      rounded="lg"
-      shadow="menu-gold"
-      mr={['auto', '1rem']}
-      bg="grayscale.black"
-      border="none"
-      padding="0rem"
+      rounded="0.5rem"
+      bg={NEUTRAL_2_82_TRANSPARENT}
+      backdropFilter="auto"
+      backdropBlur="10px"
+      border="1px solid"
+      borderColor="neutral-3"
     >
       <Box>
         {favoritesList.length === 0 ? (
           <Box p="1rem 1rem">{t('emptyFavorites')}</Box>
         ) : (
           <Box
-            p="0.5rem 1rem"
             maxHeight="20rem"
             overflowY="scroll"
             sx={{
               '&::-webkit-scrollbar': {
-                background: 'transparent',
                 width: '0.5rem',
                 height: '0.5rem',
               },
               '&::-webkit-scrollbar-thumb': {
                 border: 'none',
                 boxShadow: 'none',
-                background: 'grayscale.500',
+                background: 'neutral-4',
                 borderRadius: '0.5rem',
                 minHeight: '2.5rem',
               },
               '&::-webkit-scrollbar-thumb:hover': {
-                backgroundColor: 'grayscale.300',
+                backgroundColor: 'neutral-4',
               },
             }}
           >
diff --git a/src/components/ui/menus/FavoritesMenu/index.tsx b/src/components/ui/menus/FavoritesMenu/index.tsx
index d2f4a4ed33..f689f1c2a6 100644
--- a/src/components/ui/menus/FavoritesMenu/index.tsx
+++ b/src/components/ui/menus/FavoritesMenu/index.tsx
@@ -1,5 +1,5 @@
-import { Flex, Menu, MenuButton, Show, Text } from '@chakra-ui/react';
-import { ArrowDown, StarGoldSolid } from '@decent-org/fractal-ui';
+import { Button, Flex, Icon, Menu, MenuButton, Show, Text } from '@chakra-ui/react';
+import { CaretDown, Star } from '@phosphor-icons/react';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FavoritesList } from './FavoritesList';
@@ -7,31 +7,33 @@ import { FavoritesList } from './FavoritesList';
 export function FavoritesMenu() {
   const { t } = useTranslation('dashboard');
   return (
-    <Menu>
+    <Menu
+      placement="bottom-end"
+      offset={[0, 16]}
+    >
       {({ isOpen }) => (
         <Fragment>
           <MenuButton
+            as={Button}
+            variant="tertiary"
             data-testid="header-favoritesMenuButton"
-            h="full"
-            mx="1.5rem"
-            color="gold.500"
-            _hover={{
-              color: 'gold.500-hover',
-            }}
+            mx={{ base: 0, md: '1rem' }}
           >
-            <Flex alignItems="center">
-              <StarGoldSolid
+            <Flex
+              alignItems="center"
+              gap={2}
+            >
+              <Icon
+                as={Star}
                 boxSize="1.5rem"
-                fill="currentColor"
+                weight="fill"
               />
               <Show above="md">
-                <Text
-                  mx="0.5rem"
-                  textStyle="text-sm-mono-medium"
-                >
-                  {t('titleFavorites')}
-                </Text>
-                <ArrowDown />
+                <Text>{t('titleFavorites')}</Text>
+                <Icon
+                  as={CaretDown}
+                  boxSize="1.5rem"
+                />
               </Show>
             </Flex>
           </MenuButton>
diff --git a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
index 016f81b5ba..5b1b97a843 100644
--- a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
+++ b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
@@ -1,5 +1,6 @@
-import { VEllipsis } from '@decent-org/fractal-ui';
+import { Icon, IconButton } from '@chakra-ui/react';
 import { ERC20FreezeVoting, MultisigFreezeVoting } from '@fractal-framework/fractal-contracts';
+import { GearFine } from '@phosphor-icons/react';
 import { useMemo, useCallback, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Address, getAddress } from 'viem';
@@ -29,15 +30,14 @@ import { useFractalModal } from '../../modals/useFractalModal';
 import { OptionMenu } from '../OptionMenu';
 
 interface IManageDAOMenu {
-  parentAddress?: Address | null;
-  fractalNode?: FractalNode;
-  freezeGuard?: FreezeGuard;
-  guardContracts?: FractalGuardContracts;
-  governanceType?: GovernanceType;
+  parentAddress: Address | null;
+  fractalNode: FractalNode;
+  freezeGuard: FreezeGuard;
+  guardContracts: FractalGuardContracts;
 }
 
 /**
- * The dropdown (vertical ellipses) for managing a DAO.
+ * The dropdown for managing a DAO.
  *
  * It is important to note that you cannot rely on the useFractal()
  * hook to supply information to this menu, as it is used within the
@@ -59,10 +59,10 @@ export function ManageDAOMenu({
   const baseContracts = useSafeContracts();
   const currentTime = BigInt(useBlockTimestamp());
   const navigate = useNavigate();
-  const safeAddress = fractalNode?.daoAddress;
+  const safeAddress = fractalNode.daoAddress;
   const { getZodiacModuleProxyMasterCopyData } = useMasterCopy();
   const { canUserCreateProposal } = useCanUserCreateProposal();
-  const { getUserERC721VotingTokens } = useUserERC721VotingTokens(undefined, safeAddress, false);
+  const { getUserERC721VotingTokens } = useUserERC721VotingTokens(safeAddress, undefined, false);
   const { handleClawBack } = useClawBack({
     parentAddress,
     childSafeInfo: fractalNode,
@@ -75,9 +75,9 @@ export function ManageDAOMenu({
         // are the same - we can simply grab governance type from global scope and avoid double-fetching
         setGovernanceType(type);
       } else {
-        if (fractalNode?.fractalModules && baseContracts) {
+        if (baseContracts) {
           let result = GovernanceType.MULTISIG;
-          const azoriusModule = getAzoriusModuleFromModules(fractalNode?.fractalModules);
+          const azoriusModule = getAzoriusModuleFromModules(fractalNode.fractalModules);
           const { fractalAzoriusMasterCopyContract } = baseContracts;
           if (!!azoriusModule) {
             const azoriusContract = {
@@ -142,7 +142,7 @@ export function ManageDAOMenu({
               freezeVotingContract as ERC20FreezeVoting | MultisigFreezeVoting
             ).castFreezeVote();
           } else if (freezeVotingType === FreezeVotingType.ERC721) {
-            getUserERC721VotingTokens(undefined, parentAddress).then(tokensInfo => {
+            getUserERC721VotingTokens(parentAddress, undefined).then(tokensInfo => {
               const freezeERC721VotingContract =
                 baseContracts!.freezeERC721VotingMasterCopyContract.asSigner.attach(
                   guardContracts!.freezeVotingContractAddress!,
@@ -185,7 +185,6 @@ export function ManageDAOMenu({
     };
 
     if (
-      freezeGuard &&
       freezeGuard.freezeProposalCreatedTime &&
       freezeGuard.freezeProposalPeriod &&
       freezeGuard.freezePeriod &&
@@ -207,7 +206,6 @@ export function ManageDAOMenu({
         return [createSubDAOOption, freezeOption, settingsOption];
       }
     } else if (
-      freezeGuard &&
       freezeGuard.freezeProposalCreatedTime &&
       freezeGuard.freezePeriod &&
       isWithinFreezePeriod(
@@ -247,14 +245,25 @@ export function ManageDAOMenu({
   return (
     <OptionMenu
       trigger={
-        <VEllipsis
-          boxSize="1.5rem"
-          mt="0.25rem"
+        <Icon
+          as={GearFine}
+          boxSize="1.25rem"
         />
       }
       titleKey={canUserCreateProposal ? 'titleManageDAO' : 'titleViewDAODetails'}
       options={options}
       namespace="menu"
+      buttonAs={IconButton}
+      buttonProps={{
+        variant: 'tertiary',
+        p: '0.25rem',
+        h: 'fit-content',
+        sx: {
+          span: {
+            h: '1.25rem',
+          },
+        },
+      }}
     />
   );
 }
diff --git a/src/components/ui/menus/OptionMenu/components/index.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx
similarity index 52%
rename from src/components/ui/menus/OptionMenu/components/index.tsx
rename to src/components/ui/menus/OptionMenu/OptionsList.tsx
index 0f2566e61b..bfb2515af4 100644
--- a/src/components/ui/menus/OptionMenu/components/index.tsx
+++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx
@@ -1,24 +1,10 @@
-import { Box, Flex, MenuItem, Checkbox, Divider, Text } from '@chakra-ui/react';
+import { Box, Flex, MenuItem, Checkbox, Text } from '@chakra-ui/react';
 import { ChangeEvent, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
+import Divider from '../../utils/Divider';
+import { IOption, IOptionsList } from './types';
 
-export interface IOption {
-  optionKey: string;
-  count?: number;
-  onClick: () => void;
-  isSelected?: boolean;
-}
-
-export interface IOptionsList {
-  options: IOption[];
-  closeOnSelect?: boolean;
-  showOptionCount?: boolean;
-  showOptionSelected?: boolean;
-  namespace: string;
-  titleKey?: string;
-}
-
-export default function OptionsList({
+export function OptionsList({
   options,
   showOptionSelected,
   closeOnSelect,
@@ -36,9 +22,11 @@ export default function OptionsList({
     <>
       {titleKey && (
         <Text
-          textStyle="text-sm-sans-regular"
-          color="chocolate.200"
+          mt="0.5rem"
+          px="0.5rem"
           marginBottom="0.5rem"
+          textStyle="helper-text-small"
+          color="neutral-7"
         >
           {t(titleKey)}
         </Text>
@@ -51,11 +39,9 @@ export default function OptionsList({
               as={showOptionSelected ? Box : Text}
               onClick={clickListener}
               cursor="pointer"
-              textStyle="text-base-mono-medium"
-              color="grayscale.100"
-              _hover={{ color: 'gold.200', textDecoration: 'none' }}
-              paddingStart="0rem"
-              paddingEnd="0rem"
+              _hover={{ bg: 'neutral-3', textDecoration: 'none' }}
+              p="0.75rem 0.5rem"
+              borderRadius="0.75rem"
               gap={2}
               closeOnSelect={closeOnSelect}
               data-testid={'optionMenu-' + option.optionKey}
@@ -65,8 +51,6 @@ export default function OptionsList({
                   <Checkbox
                     isChecked={option.isSelected}
                     onChange={clickListener}
-                    colorScheme="gold"
-                    iconColor="black.900"
                     marginEnd="0.5rem"
                   />
                   {t(option.optionKey)}
@@ -74,23 +58,9 @@ export default function OptionsList({
               ) : (
                 t(option.optionKey)
               )}
-              {showOptionCount && (
-                <Text
-                  textStyle="text-base-mono-medium"
-                  color={option.count ? 'grayscale.100' : 'grayscale.500'}
-                  as="span"
-                >
-                  {option.count}
-                </Text>
-              )}
+              {showOptionCount && <Text as="span">{option.count}</Text>}
             </MenuItem>
-            {options[options.length - 1] !== option && (
-              <Divider
-                marginTop="0.25rem"
-                marginBottom="0.25rem"
-                color="chocolate.700"
-              />
-            )}
+            {options[options.length - 1] !== option && <Divider />}
           </Box>
         );
       })}
diff --git a/src/components/ui/menus/OptionMenu/index.tsx b/src/components/ui/menus/OptionMenu/index.tsx
index add0ecc34e..666c5b9287 100644
--- a/src/components/ui/menus/OptionMenu/index.tsx
+++ b/src/components/ui/menus/OptionMenu/index.tsx
@@ -1,15 +1,19 @@
-import { Menu, MenuButton, MenuList, As, MenuProps, Tooltip } from '@chakra-ui/react';
-import { MouseEvent, ReactNode } from 'react';
+import { Menu, MenuButton, MenuList, As, MenuProps, Tooltip, Portal } from '@chakra-ui/react';
+import { MouseEvent, ReactNode, RefObject } from 'react';
 import { useTranslation } from 'react-i18next';
-import OptionsList, { IOption, IOptionsList } from './components';
+import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common';
+import { OptionsList } from './OptionsList';
+import { IOption, IOptionsList } from './types';
 
-interface IOptionMenu extends Omit<MenuProps, 'children'>, IOptionsList {
+interface OptionMenuProps extends Omit<MenuProps, 'children'>, IOptionsList {
   trigger: ReactNode;
   tooltipKey?: string;
   options: IOption[];
   buttonAs?: As;
-  buttonProps?: Record<string, string | boolean | number>;
+  buttonProps?: Record<string, string | boolean | number | Record<string, any>>;
   children?: ReactNode;
+  menuListMr?: string;
+  containerRef?: RefObject<HTMLDivElement | null>;
 }
 
 export function OptionMenu({
@@ -24,9 +28,33 @@ export function OptionMenu({
   buttonProps,
   children,
   closeOnSelect = true,
+  menuListMr,
+  containerRef,
   ...rest
-}: IOptionMenu) {
+}: OptionMenuProps) {
   const { t } = useTranslation(namespace);
+  const menuList = (
+    <MenuList
+      borderWidth="1px"
+      borderColor="neutral-3"
+      borderRadius="0.75rem"
+      bg={NEUTRAL_2_82_TRANSPARENT}
+      backdropFilter="auto"
+      backdropBlur="10px"
+      mr={menuListMr || ['auto', '1rem']}
+      zIndex={1000}
+    >
+      {children}
+      <OptionsList
+        options={options}
+        showOptionSelected={showOptionSelected}
+        closeOnSelect={closeOnSelect}
+        showOptionCount={showOptionCount}
+        namespace={namespace}
+        titleKey={titleKey}
+      />
+    </MenuList>
+  );
   return (
     <Menu
       isLazy
@@ -40,35 +68,20 @@ export function OptionMenu({
       >
         <MenuButton
           as={buttonAs}
-          h="fit-content"
           onClick={(event: MouseEvent<HTMLButtonElement>) => {
             event.stopPropagation();
           }}
-          _hover={{ color: 'gold.500-hover' }}
           {...buttonProps}
         >
           {trigger}
         </MenuButton>
       </Tooltip>
-      <MenuList
-        rounded="lg"
-        shadow="menu-gold"
-        mr={['auto', '1rem']}
-        bg="grayscale.black"
-        border="none"
-        padding="1rem"
-        zIndex={1000}
-      >
-        {children}
-        <OptionsList
-          options={options}
-          showOptionSelected={showOptionSelected}
-          closeOnSelect={closeOnSelect}
-          showOptionCount={showOptionCount}
-          namespace={namespace}
-          titleKey={titleKey}
-        />
-      </MenuList>
+
+      {containerRef !== undefined ? (
+        <Portal containerRef={containerRef}>{menuList}</Portal>
+      ) : (
+        menuList
+      )}
     </Menu>
   );
 }
diff --git a/src/components/ui/menus/OptionMenu/types.tsx b/src/components/ui/menus/OptionMenu/types.tsx
new file mode 100644
index 0000000000..629966bca4
--- /dev/null
+++ b/src/components/ui/menus/OptionMenu/types.tsx
@@ -0,0 +1,15 @@
+export interface IOption {
+  optionKey: string;
+  count?: number;
+  onClick: () => void;
+  isSelected?: boolean;
+}
+
+export interface IOptionsList {
+  options: IOption[];
+  closeOnSelect?: boolean;
+  showOptionCount?: boolean;
+  showOptionSelected?: boolean;
+  namespace: string;
+  titleKey?: string;
+}
diff --git a/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx b/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx
index cb2c3bbc2c..6a5048fd74 100644
--- a/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx
+++ b/src/components/ui/modals/ConfirmModifyGovernanceModal.tsx
@@ -1,9 +1,10 @@
-import { Box, Button, Divider, Text } from '@chakra-ui/react';
+import { Box, Button, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import Divider from '../utils/Divider';
 
 export function ConfirmModifyGovernanceModal({ close }: { close: () => void }) {
   const { t } = useTranslation('modals');
@@ -24,10 +25,7 @@ export function ConfirmModifyGovernanceModal({ close }: { close: () => void }) {
       >
         {t('confirmModifyGovernanceDescription')}
       </Text>
-      <Divider
-        color="chocolate.700"
-        marginBottom="1rem"
-      />
+      <Divider marginBottom="1rem" />
       <Text
         marginBottom="1rem"
         textStyle="text-xl-mono-medium"
diff --git a/src/components/ui/modals/ConfirmUrlModal.tsx b/src/components/ui/modals/ConfirmUrlModal.tsx
index baccca8308..d88ecf19c6 100644
--- a/src/components/ui/modals/ConfirmUrlModal.tsx
+++ b/src/components/ui/modals/ConfirmUrlModal.tsx
@@ -1,5 +1,6 @@
-import { Box, Button, Divider, Text } from '@chakra-ui/react';
+import { Box, Button, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import Divider from '../utils/Divider';
 
 export function ConfirmUrlModal({ url, close }: { url: string; close: () => void }) {
   const { t } = useTranslation('modals');
@@ -7,14 +8,11 @@ export function ConfirmUrlModal({ url, close }: { url: string; close: () => void
     <Box>
       <Text
         marginBottom="1rem"
-        color="chocolate.200"
+        color="neutral-7"
       >
         {url}
       </Text>
-      <Divider
-        color="chocolate.700"
-        marginBottom="1rem"
-      />
+      <Divider marginBottom="1rem" />
       <Text marginBottom="1rem">{t('confirmAction')}</Text>
       <a
         href={url}
diff --git a/src/components/ui/modals/DelegateModal.tsx b/src/components/ui/modals/DelegateModal.tsx
index bcf804805e..76ee2f69d8 100644
--- a/src/components/ui/modals/DelegateModal.tsx
+++ b/src/components/ui/modals/DelegateModal.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Divider, Flex, SimpleGrid, Spacer, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, SimpleGrid, Spacer, Text } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
 import { Field, FieldAttributes, Formik } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +15,8 @@ import { AzoriusGovernance, DecentGovernance } from '../../../types';
 import { formatCoin } from '../../../utils/numberFormats';
 import { couldBeENS } from '../../../utils/url';
 import { AddressInput } from '../forms/EthAddressInput';
-import EtherscanLinkAddress from '../links/EtherscanLinkAddress';
+import EtherscanLink from '../links/EtherscanLink';
+import Divider from '../utils/Divider';
 
 export function DelegateModal({ close }: { close: Function }) {
   const { t } = useTranslation(['modals', 'common']);
@@ -80,7 +81,7 @@ export function DelegateModal({ close }: { close: Function }) {
     <Box>
       <SimpleGrid
         columns={2}
-        color="chocolate.200"
+        color="neutral-7"
       >
         <Text
           align="start"
@@ -90,7 +91,7 @@ export function DelegateModal({ close }: { close: Function }) {
         </Text>
         <Text
           align="end"
-          color="grayscale.100"
+          color="neutral-7"
         >
           {formatCoin(
             azoriusGovernance.votesToken.balance || 0n,
@@ -107,14 +108,17 @@ export function DelegateModal({ close }: { close: Function }) {
         </Text>
         <Text
           align="end"
-          color="grayscale.100"
+          color="neutral-7"
         >
           {azoriusGovernance.votesToken.delegatee === zeroAddress ? (
             '--'
           ) : (
-            <EtherscanLinkAddress address={azoriusGovernance.votesToken.delegatee}>
+            <EtherscanLink
+              type="address"
+              value={azoriusGovernance.votesToken.delegatee}
+            >
               {delegateeDisplayName.displayName}
-            </EtherscanLinkAddress>
+            </EtherscanLink>
           )}
         </Text>
       </SimpleGrid>
@@ -122,7 +126,7 @@ export function DelegateModal({ close }: { close: Function }) {
         decentGovernance.lockedVotesToken?.balance !== undefined && (
           <SimpleGrid
             columns={2}
-            color="chocolate.200"
+            color="neutral-6"
           >
             <Text
               align="start"
@@ -132,7 +136,7 @@ export function DelegateModal({ close }: { close: Function }) {
             </Text>
             <Text
               align="end"
-              color="grayscale.100"
+              color="neutral-7"
             >
               {formatCoin(
                 decentGovernance.lockedVotesToken.balance || 0n,
@@ -149,22 +153,22 @@ export function DelegateModal({ close }: { close: Function }) {
             </Text>
             <Text
               align="end"
-              color="grayscale.100"
+              color="neutral-7"
             >
               {decentGovernance.lockedVotesToken.delegatee === zeroAddress ? (
                 '--'
               ) : (
-                <EtherscanLinkAddress address={decentGovernance.lockedVotesToken.delegatee}>
+                <EtherscanLink
+                  type="address"
+                  value={decentGovernance.lockedVotesToken.delegatee}
+                >
                   {lockedDelegateeDisplayName.displayName}
-                </EtherscanLinkAddress>
+                </EtherscanLink>
               )}
             </Text>
           </SimpleGrid>
         )}
-      <Divider
-        color="chocolate.700"
-        marginBottom="1rem"
-      />
+      <Divider marginBottom="1rem" />
       <Formik
         initialValues={{
           address: '',
@@ -175,13 +179,12 @@ export function DelegateModal({ close }: { close: Function }) {
         {({ handleSubmit, setFieldValue, values, errors }) => (
           <form onSubmit={handleSubmit}>
             <Flex alignItems="center">
-              <Text color="grayscale.100">{t('labelDelegateInput')}</Text>
+              <Text color="neutral-7">{t('labelDelegateInput')}</Text>
               <Spacer />
               <Button
                 pr={0}
                 variant="text"
-                textStyle="text-sm-sans-regular"
-                color="gold.500-active"
+                color="lilac--3"
                 onClick={() => (user.address ? setFieldValue('address', user.address) : null)}
               >
                 {t('linkSelfDelegate')}
diff --git a/src/components/ui/modals/ForkProposalTemplateModal.tsx b/src/components/ui/modals/ForkProposalTemplateModal.tsx
index 71b86644d5..44aba24c29 100644
--- a/src/components/ui/modals/ForkProposalTemplateModal.tsx
+++ b/src/components/ui/modals/ForkProposalTemplateModal.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Divider } from '@chakra-ui/react';
+import { Box, Button } from '@chakra-ui/react';
 import { ChangeEventHandler, useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -11,6 +11,7 @@ import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 import { ProposalTemplate } from '../../../types/proposalBuilder';
 import { InputComponent } from '../forms/InputComponent';
+import Divider from '../utils/Divider';
 
 interface IForkProposalTemplateModalProps {
   proposalTemplate: ProposalTemplate;
@@ -118,14 +119,10 @@ export default function ForkProposalTemplateModal({
           width: '100%',
         }}
       />
-      <Divider
-        color="chocolate.700"
-        my={4}
-      />
+      <Divider my={4} />
       <Button
         onClick={handleSubmit}
         variant="primary"
-        disabled={!isValidDAOAddress}
         isDisabled={!isValidDAOAddress}
         width="100%"
       >
diff --git a/src/components/ui/modals/ModalBase.tsx b/src/components/ui/modals/ModalBase.tsx
index fe034c603c..5b80d66603 100644
--- a/src/components/ui/modals/ModalBase.tsx
+++ b/src/components/ui/modals/ModalBase.tsx
@@ -1,16 +1,8 @@
-import {
-  Divider,
-  Flex,
-  HStack,
-  Modal,
-  ModalContent,
-  ModalOverlay,
-  Spacer,
-  Text,
-} from '@chakra-ui/react';
-import { Alert, CloseX } from '@decent-org/fractal-ui';
+import { Flex, HStack, Modal, ModalContent, ModalOverlay, Spacer, Text } from '@chakra-ui/react';
+import { X, Warning } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../../constants/common';
+import Divider from '../utils/Divider';
 
 interface ModuleBaseProps {
   title: string;
@@ -33,35 +25,32 @@ export function ModalBase(props: ModuleBaseProps) {
     >
       <ModalOverlay backgroundColor={BACKGROUND_SEMI_TRANSPARENT} />
       <ModalContent
-        backgroundColor="black.900"
+        bg="neutral-2"
+        borderWidth="1px"
+        borderRadius="0.5rem"
+        borderColor="neutral-4"
         padding="1.5rem"
-        shadow="menu-gold"
       >
-        <Flex marginBottom="1rem">
+        <Flex
+          color="lilac-0"
+          marginBottom="1rem"
+        >
           <HStack>
-            {props.warn && (
-              <Alert
-                w="1.25rem"
-                h="1.25rem"
-              />
-            )}
+            {props.warn && <Warning size="20" />}
             <Text
-              color="grayscale.100"
-              textStyle="text-lg-mono-medium"
+              color="white-0"
+              textStyle="display-lg"
             >
               {props.title}
             </Text>
           </HStack>
           <Spacer />
-          <CloseX
+          <X
             cursor="pointer"
             onClick={props.onClose}
           />
         </Flex>
-        <Divider
-          color="chocolate.700"
-          marginBottom="1rem"
-        />
+        <Divider marginBottom="1rem" />
         {props.children}
       </ModalContent>
     </Modal>
diff --git a/src/components/ui/modals/ProposalTemplateModal.tsx b/src/components/ui/modals/ProposalTemplateModal.tsx
index 71791f8631..3119e44426 100644
--- a/src/components/ui/modals/ProposalTemplateModal.tsx
+++ b/src/components/ui/modals/ProposalTemplateModal.tsx
@@ -1,13 +1,4 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Flex,
-  FormControl,
-  FormLabel,
-  Switch,
-  VStack,
-} from '@chakra-ui/react';
+import { Box, Button, Flex, FormControl, FormLabel, Switch, VStack } from '@chakra-ui/react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -23,6 +14,7 @@ import { ProposalTemplate } from '../../../types/proposalBuilder';
 import { CustomNonceInput } from '../forms/CustomNonceInput';
 import { BigIntComponent, InputComponent } from '../forms/InputComponent';
 import Markdown from '../proposal/Markdown';
+import Divider from '../utils/Divider';
 
 interface IProposalTemplateModalProps {
   proposalTemplate: ProposalTemplate;
@@ -142,7 +134,7 @@ export default function ProposalTemplateModal({
       {description && (
         <>
           <Markdown content={description} />
-          <Divider color="chocolate.700" />
+          <Divider />
         </>
       )}
       {filledProposalTransactions.map((transaction, transactionIndex) => (
@@ -203,7 +195,7 @@ export default function ProposalTemplateModal({
               />
             </Flex>
           )}
-          {transaction.parameters.length > 0 && <Divider color="chocolate.700" />}
+          {transaction.parameters.length > 0 && <Divider />}
         </VStack>
       ))}
       <FormControl
@@ -215,12 +207,12 @@ export default function ProposalTemplateModal({
         <Switch
           isChecked={showAll}
           onChange={() => setShowAll(!showAll)}
-          colorScheme="gold"
-          bg="grayscale.300"
+          colorScheme="lilac"
+          bg="neutral-7"
           borderRadius="9999px"
         />
       </FormControl>
-      <Divider color="chocolate.700" />
+      <Divider />
       <Box marginTop="1.5rem">
         <CustomNonceInput
           nonce={nonce}
diff --git a/src/components/ui/modals/SendAssetsModal.tsx b/src/components/ui/modals/SendAssetsModal.tsx
index ce27fdd17c..2299108a44 100644
--- a/src/components/ui/modals/SendAssetsModal.tsx
+++ b/src/components/ui/modals/SendAssetsModal.tsx
@@ -1,5 +1,6 @@
-import { Box, Divider, Flex, Select, HStack, Text, Button } from '@chakra-ui/react';
+import { Box, Flex, Select, HStack, Text, Button } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
+import { CaretDown } from '@phosphor-icons/react';
 import { SafeBalanceResponse } from '@safe-global/safe-service-client';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,6 +11,7 @@ import useSendAssets from '../../pages/DAOTreasury/hooks/useSendAssets';
 import { BigIntInput } from '../forms/BigIntInput';
 import { CustomNonceInput } from '../forms/CustomNonceInput';
 import { EthAddressInput } from '../forms/EthAddressInput';
+import Divider from '../utils/Divider';
 
 // @todo add Yup and Formik to this modal
 export function SendAssetsModal({ close }: { close: () => void }) {
@@ -70,14 +72,13 @@ export function SendAssetsModal({ close }: { close: () => void }) {
         >
           <Text marginBottom="0.5rem">{t('selectLabel')}</Text>
           <Select
-            variant="outline"
-            bg="input.background"
-            borderColor="black.200"
-            borderWidth="1px"
-            borderRadius="4px"
-            color="white"
+            bgColor="neutral-1"
+            borderColor="neutral-3"
+            rounded="sm"
+            cursor="pointer"
+            iconSize="1.5rem"
+            icon={<CaretDown />}
             onChange={e => handleCoinChange(e.target.value)}
-            sx={{ '> option, > optgroup': { bg: 'input.background' } }} //TODO: This should be added to baseStyle of the theme?
           >
             {fungibleAssetsWithBalance.map((asset, index) => (
               <option
@@ -102,26 +103,28 @@ export function SendAssetsModal({ close }: { close: () => void }) {
             decimalPlaces={selectedAsset?.token?.decimals}
             placeholder="0"
             maxValue={BigInt(selectedAsset.balance)}
+            isInvalid={overDraft}
+            errorBorderColor="red-0"
           />
         </Box>
       </Flex>
       <HStack
         justify="space-between"
-        textStyle="text-sm-sans-regular"
-        color="grayscale.500"
+        textStyle="neutral-7"
+        color="white-0"
         marginTop="0.75rem"
       >
-        <Text color={overDraft ? 'alert-red.normal' : 'grayscale.500'}>
+        <Text
+          color={overDraft ? 'red-0' : 'neutral-7'}
+          textStyle="helper-text-base"
+          as="span"
+        >
           {t('selectSublabel', {
             balance: formatCoinFromAsset(selectedAsset, false),
           })}
         </Text>
       </HStack>
-      <Divider
-        color="chocolate.700"
-        marginTop="0.75rem"
-        marginBottom="0.75rem"
-      />
+      <Divider my="1.5rem" />
       <LabelWrapper
         label={t('destinationLabel')}
         subLabel={t('destinationSublabel')}
@@ -134,11 +137,7 @@ export function SendAssetsModal({ close }: { close: () => void }) {
           }}
         />
       </LabelWrapper>
-      <Divider
-        color="chocolate.700"
-        marginTop="0.75rem"
-        marginBottom="0.75rem"
-      />
+      <Divider my="1.5rem" />
       <CustomNonceInput
         nonce={nonceInput}
         onChange={nonce => setNonceInput(nonce ? nonce : undefined)}
diff --git a/src/components/ui/modals/UnwrapToken.tsx b/src/components/ui/modals/UnwrapToken.tsx
index b25974e8c1..cf9a3042a3 100644
--- a/src/components/ui/modals/UnwrapToken.tsx
+++ b/src/components/ui/modals/UnwrapToken.tsx
@@ -127,7 +127,7 @@ export function UnwrapToken({ close }: { close: () => void }) {
               >
                 <Input
                   value={azoriusGovernance.votesToken?.name}
-                  disabled={true}
+                  readOnly
                 />
               </LabelWrapper>
 
diff --git a/src/components/ui/modals/WrapToken.tsx b/src/components/ui/modals/WrapToken.tsx
index 9abdf840ad..7dd1d94fcd 100644
--- a/src/components/ui/modals/WrapToken.tsx
+++ b/src/components/ui/modals/WrapToken.tsx
@@ -173,7 +173,7 @@ export function WrapToken({ close }: { close: () => void }) {
               >
                 <Input
                   value={azoriusGovernance.votesToken?.underlyingTokenData?.name}
-                  disabled={true}
+                  readOnly
                 />
               </LabelWrapper>
 
diff --git a/src/components/ui/page/Footer.tsx b/src/components/ui/page/Footer.tsx
new file mode 100644
index 0000000000..d85e0ced59
--- /dev/null
+++ b/src/components/ui/page/Footer.tsx
@@ -0,0 +1,38 @@
+import { Flex, Link, Image } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { URL_DECENT } from '../../../constants/url';
+import ExternalLink from '../links/ExternalLink';
+
+export function Footer() {
+  const { t } = useTranslation('home');
+  return (
+    <Flex
+      w="100%"
+      flexWrap="wrap"
+      justifyContent="center"
+      alignItems="center"
+      p="3rem"
+      pt="1.5rem"
+      gap={{ base: 4, md: 8 }}
+    >
+      <Flex gap={4}>
+        <ExternalLink href="/docs/fractal_audit.pdf">{t('audit')}</ExternalLink>
+        <ExternalLink
+          href={`https://github.com/decentdao/decent-interface/releases/tag/v${import.meta.env.PACKAGE_VERSION}`}
+        >
+          v{import.meta.env.PACKAGE_VERSION}
+        </ExternalLink>
+      </Flex>
+      <Link
+        target="_blank"
+        rel="noreferrer"
+        href={URL_DECENT}
+      >
+        <Image
+          src="/images/footer-logo.svg"
+          alt="Made with love by Decent DAO"
+        />
+      </Link>
+    </Flex>
+  );
+}
diff --git a/src/components/ui/page/Header/Avatar.tsx b/src/components/ui/page/Header/Avatar.tsx
index 074435bb8b..51cdc1874c 100644
--- a/src/components/ui/page/Header/Avatar.tsx
+++ b/src/components/ui/page/Header/Avatar.tsx
@@ -1,7 +1,8 @@
 import { Box, Image } from '@chakra-ui/react';
-import { Jazzicon } from '@ukstv/jazzicon-react';
+import { blo } from 'blo';
 import { Suspense } from 'react';
 import { useImage } from 'react-image';
+import { getAddress } from 'viem';
 
 type AvatarSize = 'icon' | 'lg' | 'sm';
 const avatarSizes: { [size: string]: string } = {
@@ -10,13 +11,17 @@ const avatarSizes: { [size: string]: string } = {
   lg: '2rem',
 };
 
-function JazziconAvatar({ address, size }: { size: AvatarSize; address: string }) {
+function BlockieAvatar({ address, size }: { size: AvatarSize; address: string }) {
   return (
     <Box
       h={avatarSizes[size]}
       w={avatarSizes[size]}
     >
-      <Jazzicon address={address} />
+      <Image
+        borderRadius="full"
+        src={blo(getAddress(address))}
+        alt={address}
+      />
     </Box>
   );
 }
@@ -48,7 +53,7 @@ function Avatar({
 }) {
   if (!url) {
     return (
-      <JazziconAvatar
+      <BlockieAvatar
         size={size}
         address={address}
       />
@@ -58,7 +63,7 @@ function Avatar({
   return (
     <Suspense
       fallback={
-        <JazziconAvatar
+        <BlockieAvatar
           size={size}
           address={address}
         />
diff --git a/src/components/ui/page/Header/Breadcrumbs.tsx b/src/components/ui/page/Header/Breadcrumbs.tsx
index 076d668bbf..5388e42e44 100644
--- a/src/components/ui/page/Header/Breadcrumbs.tsx
+++ b/src/components/ui/page/Header/Breadcrumbs.tsx
@@ -4,18 +4,25 @@ export type Crumb = {
   terminus: string;
   path: string;
 };
-interface IBreadcrumbs {
+interface BreadcrumbsProps {
   links: Crumb[];
+  w?: {
+    base: string;
+    sm: string;
+  };
 }
 
-export default function Breadcrumbs({ links }: IBreadcrumbs) {
+export default function Breadcrumbs({
+  links,
+  w = { base: 'min-content', sm: 'initial' },
+}: BreadcrumbsProps) {
   return (
     <Breadcrumb
-      color="chocolate.200"
-      height="36px"
       display="flex"
       alignItems="center"
-      w={{ base: 'min-content', sm: 'initial' }}
+      color="neutral-7"
+      w={w}
+      listProps={{ flexWrap: 'wrap' }}
     >
       {links.map(({ terminus: title, path }, i) => {
         const isCurrentPage = i === links.length - 1;
@@ -25,15 +32,19 @@ export default function Breadcrumbs({ links }: IBreadcrumbs) {
             overflow="hidden"
             whiteSpace="nowrap"
             textOverflow="ellipsis"
-            textStyle="text-base-mono-regular"
+            textStyle="helper-text-base"
+            color={isCurrentPage ? 'neutral-7' : 'neutral-6'}
           >
             {title}
           </Text>
         );
+
         return (
           <BreadcrumbItem
             key={path}
             isCurrentPage={isCurrentPage}
+            color="neutral-7"
+            textStyle="helper-text-base"
           >
             {isCurrentPage ? (
               crumbText
@@ -43,8 +54,7 @@ export default function Breadcrumbs({ links }: IBreadcrumbs) {
                 to={path}
                 display="flex"
                 alignItems="center"
-                color={isCurrentPage ? 'chocolate.200' : 'gold.500'}
-                _hover={{ textDecoration: 'none', color: 'gold.500-hover' }}
+                _hover={{ textDecoration: 'none', color: 'neutral-7' }} // Guessed. Probaby incorrect, couldn't find on figma
               >
                 {crumbText}
               </BreadcrumbLink>
diff --git a/src/components/ui/page/Header/PageHeader.tsx b/src/components/ui/page/Header/PageHeader.tsx
index 6dace80ae1..a5ca988f3c 100644
--- a/src/components/ui/page/Header/PageHeader.tsx
+++ b/src/components/ui/page/Header/PageHeader.tsx
@@ -1,28 +1,21 @@
-import {
-  Box,
-  Button,
-  ComponentWithAs,
-  Divider,
-  Flex,
-  IconButton,
-  IconProps,
-  Spacer,
-  Text,
-} from '@chakra-ui/react';
+import { Box, Button, Flex, Icon, IconButton, Spacer, Text } from '@chakra-ui/react';
+import { Icon as PhosphorIcon } from '@phosphor-icons/react';
 import { ReactNode, useEffect, useState } from 'react';
+import { CONTENT_MAXW } from '../../../../constants/common';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { createAccountSubstring } from '../../../../hooks/utils/useDisplayName';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 import AddressCopier from '../../links/AddressCopier';
+import Divider from '../../utils/Divider';
 import Breadcrumbs, { Crumb } from './Breadcrumbs';
-interface IPageHeader {
+interface PageHeaderProps {
   title?: string;
   address?: string;
   breadcrumbs: Crumb[];
   hasDAOLink?: boolean;
   buttonVariant?: 'text' | 'secondary';
-  ButtonIcon?: ComponentWithAs<'svg', IconProps>;
+  ButtonIcon?: PhosphorIcon;
   buttonText?: string;
   buttonClick?: () => void;
   buttonTestId?: string;
@@ -45,7 +38,7 @@ function PageHeader({
   buttonTestId,
   isButtonDisabled,
   children,
-}: IPageHeader) {
+}: PageHeaderProps) {
   const {
     node: { daoAddress, daoName },
   } = useFractal();
@@ -65,54 +58,68 @@ function PageHeader({
     }
   }, [hasDAOLink, daoName, daoAddress, breadcrumbs, addressPrefix]);
 
+  const showAction = !!buttonText || !!ButtonIcon || !!children;
+
   return (
     <Box
       marginTop="3rem"
-      marginBottom="2rem"
+      marginBottom="1.5rem"
+      maxW={CONTENT_MAXW}
     >
       <Flex
         alignItems="center"
         gap={{ base: 1, sm: 4 }}
         w="full"
       >
-        <Breadcrumbs links={links} />
-        <Spacer />
-        {buttonText && (
-          <Button
-            onClick={buttonClick}
-            data-testid={buttonTestId}
-            variant={buttonVariant}
-            isDisabled={isButtonDisabled}
-          >
-            {buttonText}
-          </Button>
-        )}
-        {ButtonIcon && (
-          <IconButton
-            aria-label="navigate"
-            icon={<ButtonIcon boxSize="1.5rem" />}
-            onClick={buttonClick}
-            minWidth="0"
-            px="1rem"
-            data-testid={buttonTestId}
-            size="base"
-            variant={buttonVariant}
-            isDisabled={isButtonDisabled}
-          >
-            {buttonText}
-          </IconButton>
+        <Breadcrumbs
+          links={links}
+          w={!showAction ? { base: 'full', sm: 'full' } : undefined}
+        />
+        {showAction && (
+          <>
+            <Spacer />
+            {buttonText && (
+              <Button
+                onClick={buttonClick}
+                data-testid={buttonTestId}
+                variant={buttonVariant}
+                isDisabled={isButtonDisabled}
+              >
+                {buttonText}
+              </Button>
+            )}
+            {ButtonIcon && (
+              <IconButton
+                aria-label="navigate"
+                icon={
+                  <Icon
+                    boxSize="1.25rem"
+                    as={ButtonIcon}
+                  />
+                }
+                onClick={buttonClick}
+                variant="tertiary"
+                size="icon-sm"
+                data-testid={buttonTestId}
+                isDisabled={isButtonDisabled}
+                as={Button}
+              >
+                {buttonText}
+              </IconButton>
+            )}
+            {children}
+          </>
         )}
-        {children}
       </Flex>
       <Divider
-        marginTop="1rem"
-        borderColor="chocolate.400"
+        variant="darker"
+        mt="1rem"
       />
       {title && (
         <Text
           marginTop="2rem"
-          textStyle="text-2xl-mono-regular"
-          color="grayscale.100"
+          textStyle="display-2xl"
+          color="white-0"
         >
           {title}
         </Text>
@@ -121,6 +128,7 @@ function PageHeader({
         <AddressCopier
           marginTop="0.5rem"
           address={address}
+          display="inline-flex"
         />
       )}
     </Box>
diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx
index 1b6595da76..e93d1fadcb 100644
--- a/src/components/ui/page/Header/index.tsx
+++ b/src/components/ui/page/Header/index.tsx
@@ -1,27 +1,159 @@
-import { Flex, Show } from '@chakra-ui/react';
+import {
+  Box,
+  Drawer,
+  DrawerCloseButton,
+  DrawerContent,
+  Flex,
+  Hide,
+  IconButton,
+  Show,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { DecentLogo } from '@decent-org/fractal-ui';
+import { useRef, RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { HEADER_HEIGHT, NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common';
+import { BASE_ROUTES } from '../../../../constants/routes';
+import { useFractal } from '../../../../providers/App/AppProvider';
 import { AccountDisplay } from '../../menus/AccountDisplay';
 import { DAOSearch } from '../../menus/DAOSearch';
 import { FavoritesMenu } from '../../menus/FavoritesMenu';
+import { NavigationLinks } from '../Navigation/NavigationLinks';
 
-function Header() {
+function HeaderLogo() {
+  const { t } = useTranslation('navigation');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef<HTMLButtonElement | null>(null);
+
+  const {
+    node: { daoAddress },
+  } = useFractal();
+
+  const showDAOLinks = !!daoAddress;
+  return (
+    <Flex
+      alignItems="center"
+      direction="column"
+      justifyContent="space-between"
+      flexGrow={1}
+    >
+      <Hide above="md">
+        <>
+          <IconButton
+            ref={btnRef}
+            onClick={onOpen}
+            boxSize="4rem"
+            w={0}
+            aria-label="navigation"
+            minW={0}
+            variant="unstyled"
+            icon={
+              <DecentLogo
+                aria-hidden
+                h="2.5rem"
+                w="2.125rem"
+                ml="1.5rem"
+              />
+            }
+          />
+          <Drawer
+            placement="left"
+            isOpen={isOpen}
+            onClose={onClose}
+            size="full"
+            isFullHeight
+          >
+            <DrawerContent
+              bg={NEUTRAL_2_82_TRANSPARENT}
+              border="none"
+              backdropFilter="auto"
+              backdropBlur="10px"
+            >
+              <Flex
+                mt={4}
+                justifyContent="space-between"
+              >
+                <Link
+                  data-testid="navigationLogo-homeLink"
+                  to={BASE_ROUTES.landing}
+                  aria-label={t('ariaLabelFractalBrand')}
+                  onClick={onClose}
+                >
+                  <DecentLogo
+                    aria-hidden
+                    h="2.5rem"
+                    w="2.125rem"
+                    ml="1.75rem"
+                  />
+                </Link>
+                <DrawerCloseButton
+                  size="lg"
+                  zIndex="banner"
+                  color="lilac-0"
+                  position="relative"
+                  top="0px"
+                />
+              </Flex>
+
+              <Box
+                mt={8}
+                px={6}
+              >
+                <DAOSearch closeDrawer={onClose} />
+              </Box>
+              <Box
+                px={6}
+                pt={8}
+              >
+                <NavigationLinks
+                  showDAOLinks={showDAOLinks}
+                  address={daoAddress}
+                  closeDrawer={onClose}
+                />
+              </Box>
+            </DrawerContent>
+          </Drawer>
+        </>
+      </Hide>
+      <Show above="md">
+        <Link
+          data-testid="navigationLogo-homeLink"
+          to={BASE_ROUTES.landing}
+          aria-label={t('ariaLabelFractalBrand')}
+        >
+          <DecentLogo
+            aria-hidden
+            h="2.5rem"
+            w="2.125rem"
+            mx="1.75rem"
+          />
+        </Link>
+      </Show>
+    </Flex>
+  );
+}
+function Header({ headerContainerRef }: { headerContainerRef: RefObject<HTMLDivElement | null> }) {
   return (
     <Flex
-      h="full"
       w="full"
       justifyContent="space-between"
-      pe="0.5rem"
       alignItems="center"
+      pr="1.5rem"
+      maxW="100vw"
     >
+      <HeaderLogo />
       <Show above="md">
         <DAOSearch />
       </Show>
       <Flex
-        h="full"
         w="full"
+        h={HEADER_HEIGHT}
         justifyContent="flex-end"
+        alignItems="center"
       >
         <FavoritesMenu />
-        <AccountDisplay />
+        <AccountDisplay containerRef={headerContainerRef} />
       </Flex>
     </Flex>
   );
diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
index 4fb69f7ef7..35e521b76b 100644
--- a/src/components/ui/page/Layout/index.tsx
+++ b/src/components/ui/page/Layout/index.tsx
@@ -1,26 +1,68 @@
-import { Box, Container, Grid, GridItem } from '@chakra-ui/react';
+import { Box, Container, Grid, GridItem, Show } from '@chakra-ui/react';
+import { useRef } from 'react';
 import { Outlet } from 'react-router-dom';
 import { CONTENT_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
+import { useFractal } from '../../../../providers/App/AppProvider';
 import { ErrorBoundary } from '../../utils/ErrorBoundary';
 import { TopErrorFallback } from '../../utils/TopErrorFallback';
+import { Footer } from '../Footer';
 import Header from '../Header';
-import Navigation from '../Navigation';
+import { NavigationLinks } from '../Navigation/NavigationLinks';
 
 export default function Layout() {
+  const {
+    node: { daoAddress },
+  } = useFractal();
+  const headerContainerRef = useRef<HTMLDivElement>(null);
+
   return (
     <Grid
       templateAreas={{
-        base: `"nav header"
-"main main"`,
-        md: `"nav header"
-"nav main"`,
+        base: `"header header"
+               "main main"
+               "footer footer"`,
+        md: `"header header"
+             "nav main"
+             "footer footer"`,
       }}
       gridTemplateColumns="4.25rem 1fr"
       gridTemplateRows={`${HEADER_HEIGHT} minmax(${CONTENT_HEIGHT}, 100%)`}
       position="relative"
     >
       <GridItem
-        area={'main'}
+        area="header"
+        ref={headerContainerRef}
+      >
+        <Box
+          bg="neutral-2"
+          boxShadow="0px 1px 0px 0px #161219"
+          position="fixed"
+          w="full"
+          maxW="100vw"
+          zIndex="1"
+        >
+          <Header headerContainerRef={headerContainerRef} />
+        </Box>
+      </GridItem>
+      <GridItem
+        area="nav"
+        zIndex="modal"
+        display="flex"
+        flexDirection="column"
+        position="fixed"
+        ml={6}
+        top={`${HEADER_HEIGHT}`}
+        minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT})` }}
+      >
+        <Show above="md">
+          <NavigationLinks
+            showDAOLinks={!!daoAddress}
+            address={daoAddress}
+          />
+        </Show>
+      </GridItem>
+      <GridItem
+        area="main"
         mx="1.5rem"
       >
         <Container
@@ -38,30 +80,8 @@ export default function Layout() {
           </ErrorBoundary>
         </Container>
       </GridItem>
-      <GridItem area={'header'}>
-        <Box
-          as="header"
-          bg="chocolate.900"
-          h="4rem"
-          position="fixed"
-          zIndex={5}
-          w="calc(100% - 4.25rem)"
-        >
-          <Header />
-        </Box>
-      </GridItem>
-
-      <GridItem
-        area={'nav'}
-        display="flex"
-        flexDirection="column"
-        flexGrow="1"
-        bg="chocolate.900"
-        position="fixed"
-        w="4.25rem"
-        minHeight={{ base: undefined, md: '100vh' }}
-      >
-        <Navigation />
+      <GridItem area="footer">
+        <Footer />
       </GridItem>
     </Grid>
   );
diff --git a/src/components/ui/page/Navigation/NavigationExternalLink.tsx b/src/components/ui/page/Navigation/NavigationExternalLink.tsx
deleted file mode 100644
index 18e115bc99..0000000000
--- a/src/components/ui/page/Navigation/NavigationExternalLink.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import { NavigationTooltip } from './NavigationTooltip';
-
-interface INavigationLink {
-  tooltipKey: string;
-  ariaLabelKey: string;
-  href: string;
-  testId: string;
-  routeKey?: string;
-  Icon: ComponentWithAs<'svg', IconProps>;
-  closeDrawer?: () => void;
-}
-
-export function NavigationExternalLink({
-  tooltipKey,
-  ariaLabelKey,
-  testId,
-  Icon,
-  routeKey,
-  closeDrawer,
-  ...rest
-}: INavigationLink) {
-  const { t } = useTranslation('navigation');
-
-  return (
-    <NavigationTooltip label={t(tooltipKey)}>
-      <a
-        data-testid={testId}
-        aria-label={t(ariaLabelKey)}
-        {...rest}
-        onClick={closeDrawer}
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <Box
-          display={{ base: 'flex', md: undefined }}
-          gap={8}
-          justifyContent="space-between"
-          alignItems="center"
-          _hover={{ color: 'gold.500-hover', cursor: 'pointer' }}
-        >
-          <Icon boxSize="1.5rem" />
-          <Hide above="md">
-            <Text textStyle="text-md-mono-medium">{t(tooltipKey)}</Text>
-          </Hide>
-        </Box>
-      </a>
-    </NavigationTooltip>
-  );
-}
diff --git a/src/components/ui/page/Navigation/NavigationLink.tsx b/src/components/ui/page/Navigation/NavigationLink.tsx
index 9818af6f66..c7421fd9b7 100644
--- a/src/components/ui/page/Navigation/NavigationLink.tsx
+++ b/src/components/ui/page/Navigation/NavigationLink.tsx
@@ -1,74 +1,103 @@
-import { Box, ComponentWithAs, Hide, IconProps, Text } from '@chakra-ui/react';
-import { useCallback } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { Icon } from '@phosphor-icons/react';
+import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { Link, useMatch } from 'react-router-dom';
-import { NavigationTooltip } from './NavigationTooltip';
 
-interface INavigationLink {
-  href: string;
+function LinkContent({
+  labelKey,
+  NavigationIcon,
+  t,
+  isActive,
+  scope,
+}: {
   labelKey: string;
-  tooltipKey?: string;
-  testId: string;
-  Icon: ComponentWithAs<'svg', IconProps>;
-  target?: string;
-  rel?: string;
-  closeDrawer?: () => void;
+  NavigationIcon: Icon;
+  t: TFunction;
+  isActive: boolean;
+  scope: 'internal' | 'external';
+}) {
+  return (
+    <Box p="0.25rem">
+      <Flex
+        py="6px"
+        px="6px"
+        borderRadius={{ md: 4 }}
+        _hover={{ bgColor: 'neutral-3' }}
+        borderWidth="1px"
+        borderColor={scope === 'internal' && isActive ? 'neutral-4' : 'neutral-2'}
+        bgColor={scope === 'internal' && isActive ? 'neutral-3' : undefined}
+      >
+        <Box w={6}>{<NavigationIcon size={24} />}</Box>
+        <Box
+          mx={3}
+          whiteSpace="nowrap"
+        >
+          {t(labelKey)}
+        </Box>
+      </Flex>
+    </Box>
+  );
 }
 
 export function NavigationLink({
+  href,
   labelKey,
   testId,
-  Icon,
-  tooltipKey,
+  NavigationIcon,
+  scope,
   closeDrawer,
-  href,
   ...rest
-}: INavigationLink) {
-  const tooltipTranslationKey = tooltipKey || labelKey;
-
+}: {
+  href: string;
+  labelKey: string;
+  testId: string;
+  NavigationIcon: Icon;
+  scope: 'internal' | 'external';
+  closeDrawer?: () => void;
+}) {
   const { t } = useTranslation('navigation');
-  const isActive = useMatch(href);
+  const isActive = useMatch(href.substring(0, href.indexOf('?')));
 
-  const activeColors = useCallback(() => {
-    return {
-      color: isActive ? 'gold.500' : 'inherit',
-      _hover: {
-        color: 'gold.500-hover',
-      },
-    };
-  }, [isActive]);
+  const linkContent = (
+    <LinkContent
+      labelKey={labelKey}
+      NavigationIcon={NavigationIcon}
+      t={t}
+      isActive={!!isActive}
+      scope={scope}
+    />
+  );
 
-  return (
-    <NavigationTooltip label={t(tooltipTranslationKey)}>
+  if (scope === 'internal') {
+    return (
       <Link
         data-testid={testId}
-        aria-label={t(tooltipTranslationKey)}
+        aria-label={t(labelKey)}
         to={href}
-        {...rest}
         onClick={closeDrawer}
+        {...rest}
       >
-        <Box
-          display={{ base: 'flex', md: undefined }}
-          gap={8}
-          justifyContent="space-between"
-          alignItems="center"
-          {...activeColors()}
-        >
-          <Icon
-            boxSize="1.5rem"
-            sx={{
-              'g path': {
-                transitionProperty: 'all',
-                transitionDuration: '300ms',
-                transitionTimingFunction: 'ease-out',
-              },
-            }}
-          />
-          <Hide above="md">
-            <Text textStyle="text-md-mono-medium">{t(labelKey)}</Text>
-          </Hide>
-        </Box>
+        {linkContent}
       </Link>
-    </NavigationTooltip>
-  );
+    );
+  }
+
+  if (scope === 'external') {
+    return (
+      <a
+        data-testid={testId}
+        aria-label={t(labelKey)}
+        href={href}
+        onClick={closeDrawer}
+        {...rest}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {linkContent}
+      </a>
+    );
+  }
+
+  return null;
 }
diff --git a/src/components/ui/page/Navigation/NavigationLinks.tsx b/src/components/ui/page/Navigation/NavigationLinks.tsx
index 20c16597f1..961ebf0e1b 100644
--- a/src/components/ui/page/Navigation/NavigationLinks.tsx
+++ b/src/components/ui/page/Navigation/NavigationLinks.tsx
@@ -1,117 +1,170 @@
-import { Divider, Flex } from '@chakra-ui/react';
+import { Box, Flex, Hide } from '@chakra-ui/react';
 import {
-  Home,
-  Tree,
-  Proposals,
-  Treasury,
-  SupportQuestion,
-  Discord,
-  Documents,
-  Templates,
-} from '@decent-org/fractal-ui';
+  House,
+  GitFork,
+  Scroll,
+  Coins,
+  SquaresFour,
+  Question,
+  DiscordLogo,
+  BookOpen,
+} from '@phosphor-icons/react';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { URL_FAQ, URL_DISCORD, URL_DOCS } from '../../../../constants/url';
 import { LanguageSwitcher } from '../../../../i18n/LanguageSwitcher';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { NavigationExternalLink } from './NavigationExternalLink';
+import Divider from '../../utils/Divider';
 import { NavigationLink } from './NavigationLink';
 
-export function NavigationLinks({
+function ExternalLinks({ closeDrawer }: { closeDrawer?: () => void }) {
+  return (
+    <Box
+      mb={6}
+      mt={{ base: 0, md: 6 }}
+      maxWidth={{ md: 12, '3xl': '100%' }}
+      _hover={{ maxWidth: '100%' }}
+      transitionDuration="0.2s"
+      width={{ base: 'full', md: 'auto' }}
+      borderRadius={{ md: 8 }}
+      borderWidth={{ md: 1 }}
+      borderColor={{ md: 'neutral-3' }}
+      bg={{ md: 'neutral-2' }}
+      overflow={{ md: 'hidden' }}
+    >
+      <NavigationLink
+        href={URL_FAQ}
+        labelKey="faq"
+        testId="navigationExternal-faq"
+        NavigationIcon={Question}
+        scope="external"
+        closeDrawer={closeDrawer}
+      />
+      <NavigationLink
+        href={URL_DISCORD}
+        labelKey="discord"
+        testId="navigationExternal-discord"
+        NavigationIcon={DiscordLogo}
+        scope="external"
+        closeDrawer={closeDrawer}
+      />
+      <NavigationLink
+        href={URL_DOCS}
+        labelKey="documentation"
+        testId="navigationExternal-documentation"
+        NavigationIcon={BookOpen}
+        scope="external"
+        closeDrawer={closeDrawer}
+      />
+      <Divider />
+      <LanguageSwitcher data-testid="navigation-language" />
+    </Box>
+  );
+}
+
+function InternalLinks({
   address,
   showDAOLinks,
   closeDrawer,
 }: {
-  showDAOLinks: boolean;
   address: string | null;
+  showDAOLinks: boolean;
   closeDrawer?: () => void;
 }) {
   const { addressPrefix } = useNetworkConfig();
+
+  if (!showDAOLinks || !address) {
+    return null;
+  }
+
   return (
-    <>
-      {showDAOLinks && address && (
-        <>
-          <Flex
-            alignItems={{ base: 'flex-start', md: 'center' }}
-            direction="column"
-            gap="2rem"
-            w="full"
-            my={8}
-          >
-            <NavigationLink
-              href={DAO_ROUTES.dao.relative(addressPrefix, address)}
-              labelKey="home"
-              testId="navigation-daoHomeLink"
-              Icon={Home}
-              closeDrawer={closeDrawer}
-            />
-            <NavigationLink
-              href={DAO_ROUTES.hierarchy.relative(addressPrefix, address)}
-              labelKey="nodes"
-              testId="navigation-hierarchy"
-              Icon={Tree}
-              closeDrawer={closeDrawer}
-            />
-            <NavigationLink
-              href={DAO_ROUTES.proposals.relative(addressPrefix, address)}
-              labelKey="proposals"
-              testId="navigation-proposalsLink"
-              Icon={Proposals}
-              closeDrawer={closeDrawer}
-            />
-            <NavigationLink
-              href={DAO_ROUTES.treasury.relative(addressPrefix, address)}
-              labelKey="treasury"
-              testId="navigation-treasuryLink"
-              Icon={Treasury}
-              closeDrawer={closeDrawer}
-            />
-            <NavigationLink
-              href={DAO_ROUTES.proposalTemplates.relative(addressPrefix, address)}
-              labelKey="proposalTemplates"
-              testId="navigation-proposalTemplatesLink"
-              Icon={Templates}
-              closeDrawer={closeDrawer}
-            />
-          </Flex>
-        </>
-      )}
-      <Flex
-        alignItems={{ base: 'flex-start', md: 'center' }}
-        direction="column"
-        gap="2rem"
-        w="full"
-        mb={8}
-        justifyContent={{ base: 'flex-start' }}
+    <Box
+      width="full"
+      marginY="auto"
+    >
+      <Box
+        maxWidth={{ md: 12, '3xl': '100%' }}
+        _hover={{ maxWidth: '100%' }}
+        transitionDuration="0.2s"
+        overflow={{ md: 'hidden' }}
+        mt={{ md: 12 }}
+        mb={{ md: 3 }}
+        bg={{ md: '#26212AD6' }}
+        borderColor={{ md: 'neutral-3' }}
+        borderRadius={{ md: 8 }}
+        borderWidth={{ md: 1 }}
+        backdropFilter="blur(12px)"
+        boxShadow="0px 1px 0px 0px #161219"
       >
-        <Divider color="chocolate.700" />
-        <NavigationExternalLink
-          href={URL_FAQ}
-          ariaLabelKey="ariaLabelFAQ"
-          tooltipKey="faq"
-          testId="navigationExternal-faq"
-          Icon={SupportQuestion}
+        <NavigationLink
+          href={DAO_ROUTES.dao.relative(addressPrefix, address)}
+          labelKey="home"
+          testId="navigation-daoHomeLink"
+          NavigationIcon={House}
+          scope="internal"
+          closeDrawer={closeDrawer}
+        />
+        <NavigationLink
+          href={DAO_ROUTES.hierarchy.relative(addressPrefix, address)}
+          labelKey="nodes"
+          testId="navigation-hierarchy"
+          NavigationIcon={GitFork}
+          scope="internal"
+          closeDrawer={closeDrawer}
+        />
+        <NavigationLink
+          href={DAO_ROUTES.proposals.relative(addressPrefix, address)}
+          labelKey="proposals"
+          testId="navigation-proposalsLink"
+          NavigationIcon={Scroll}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
-        <NavigationExternalLink
-          href={URL_DISCORD}
-          ariaLabelKey="ariaLabelDiscord"
-          tooltipKey="discord"
-          testId="navigationExternal-discord"
-          Icon={Discord}
+        <NavigationLink
+          href={DAO_ROUTES.treasury.relative(addressPrefix, address)}
+          labelKey="treasury"
+          testId="navigation-treasuryLink"
+          NavigationIcon={Coins}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
-        <NavigationExternalLink
-          href={URL_DOCS}
-          ariaLabelKey="ariaLabelDocumentation"
-          tooltipKey="documentation"
-          testId="navigationExternal-documentation"
-          Icon={Documents}
+        <NavigationLink
+          href={DAO_ROUTES.proposalTemplates.relative(addressPrefix, address)}
+          labelKey="proposalTemplates"
+          testId="navigation-proposalTemplatesLink"
+          NavigationIcon={SquaresFour}
+          scope="internal"
           closeDrawer={closeDrawer}
         />
+        <Hide above="md">
+          <Divider mx={-6} />
+        </Hide>
+      </Box>
+    </Box>
+  );
+}
 
-        <Divider color="chocolate.700" />
-        <LanguageSwitcher data-testid="navigation-language" />
-      </Flex>
-    </>
+export function NavigationLinks({
+  address,
+  showDAOLinks,
+  closeDrawer,
+}: {
+  showDAOLinks: boolean;
+  address: string | null;
+  closeDrawer?: () => void;
+}) {
+  return (
+    <Flex
+      alignItems="start"
+      direction="column"
+      justifyContent="flex-end"
+      flexGrow={1}
+    >
+      <InternalLinks
+        address={address}
+        showDAOLinks={showDAOLinks}
+        closeDrawer={closeDrawer}
+      />
+      <ExternalLinks closeDrawer={closeDrawer} />
+    </Flex>
   );
 }
diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx
deleted file mode 100644
index e83bec9175..0000000000
--- a/src/components/ui/page/Navigation/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import {
-  Box,
-  Divider,
-  Drawer,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerOverlay,
-  Flex,
-  Hide,
-  IconButton,
-  Show,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { FractalBrandBurger, FractalBrand } from '@decent-org/fractal-ui';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { BASE_ROUTES } from '../../../../constants/routes';
-import { useFractal } from '../../../../providers/App/AppProvider';
-import { DAOSearch } from '../../menus/DAOSearch';
-import { NavigationLinks } from './NavigationLinks';
-
-function Navigation() {
-  const { t } = useTranslation('navigation');
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const btnRef = React.useRef<HTMLButtonElement | null>(null);
-
-  const {
-    node: { daoAddress },
-  } = useFractal();
-
-  const showDAOLinks = !!daoAddress;
-  return (
-    <>
-      <Flex
-        alignItems="center"
-        direction="column"
-        justifyContent="space-between"
-        flexGrow={1}
-      >
-        <Hide above="md">
-          <>
-            <IconButton
-              ref={btnRef}
-              onClick={onOpen}
-              display="flex"
-              boxSize="4rem"
-              justifyContent="center"
-              alignItems="center"
-              aria-label="navigation"
-              minW={0}
-              variant="unstyled"
-              icon={
-                <FractalBrandBurger
-                  aria-hidden
-                  boxSize="2rem"
-                />
-              }
-            />
-            <Drawer
-              placement="left"
-              isOpen={isOpen}
-              onClose={onClose}
-              size="full"
-              isFullHeight
-            >
-              <DrawerOverlay />
-              <DrawerContent
-                bg="chocolate.900"
-                border="none"
-              >
-                <DrawerCloseButton
-                  size="lg"
-                  zIndex="banner"
-                />
-
-                <Box
-                  mt={12}
-                  px={8}
-                  position="relative"
-                >
-                  <DAOSearch closeDrawer={onClose} />
-                </Box>
-                <Flex
-                  alignItems="center"
-                  direction="column"
-                  justifyContent={showDAOLinks ? 'space-evenly' : 'flex-start'}
-                  flexGrow={1}
-                  overflowY="auto"
-                  px={8}
-                  pt={8}
-                >
-                  <Divider color="chocolate.700" />
-                  <NavigationLinks
-                    showDAOLinks={showDAOLinks}
-                    address={daoAddress}
-                    closeDrawer={onClose}
-                  />
-                </Flex>
-              </DrawerContent>
-            </Drawer>
-          </>
-        </Hide>
-        <Show above="md">
-          <Link
-            data-testid="navigationLogo-homeLink"
-            to={BASE_ROUTES.landing}
-            aria-label={t('ariaLabelFractalBrand')}
-          >
-            <FractalBrand
-              aria-hidden
-              boxSize="4.25rem"
-            />
-          </Link>
-          <NavigationLinks
-            showDAOLinks={showDAOLinks}
-            address={daoAddress}
-          />
-        </Show>
-      </Flex>
-    </>
-  );
-}
-
-export default Navigation;
diff --git a/src/components/ui/proposal/InfoRow.tsx b/src/components/ui/proposal/InfoRow.tsx
index 1e58dfd0b7..505c824a67 100644
--- a/src/components/ui/proposal/InfoRow.tsx
+++ b/src/components/ui/proposal/InfoRow.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Text, Tooltip } from '@chakra-ui/react';
 import DisplayTransaction from '../../ui/links/DisplayTransaction';
 
 export default function InfoRow({
@@ -13,13 +13,11 @@ export default function InfoRow({
   tooltip?: string;
 }) {
   return (
-    <Flex
-      marginTop={4}
-      justifyContent="space-between"
-    >
+    <Box marginTop="1rem">
       <Text
-        textStyle="text-base-sans-regular"
-        color="chocolate.200"
+        textStyle="body-base"
+        color="neutral-7"
+        w="full"
       >
         {property}
       </Text>
@@ -31,9 +29,9 @@ export default function InfoRow({
         )
       ) : (
         <Tooltip label={tooltip}>
-          {txHash ? <DisplayTransaction txHash={txHash} /> : <Text>{value}</Text>}
+          {txHash ? <DisplayTransaction txHash={txHash} /> : <Text color="white-0">{value}</Text>}
         </Tooltip>
       )}
-    </Flex>
+    </Box>
   );
 }
diff --git a/src/components/ui/proposal/Markdown.tsx b/src/components/ui/proposal/Markdown.tsx
index ce1bfa3b59..1a386b1b37 100644
--- a/src/components/ui/proposal/Markdown.tsx
+++ b/src/components/ui/proposal/Markdown.tsx
@@ -35,10 +35,16 @@ const MarkdownComponents: Components = {
 interface IMarkdown {
   truncate?: boolean;
   collapsedLines?: number;
+  hideCollapsed?: boolean;
   content: string;
 }
 
-export default function Markdown({ truncate, content, collapsedLines = 6 }: IMarkdown) {
+export default function Markdown({
+  truncate,
+  content,
+  collapsedLines = 6,
+  hideCollapsed = false,
+}: IMarkdown) {
   const { t } = useTranslation('common');
   const [collapsed, setCollapsed] = useState(true);
   const [totalLines, setTotalLines] = useState(0);
@@ -87,22 +93,32 @@ export default function Markdown({ truncate, content, collapsedLines = 6 }: IMar
         noOfLines={collapsed || truncate ? collapsedLines : undefined}
         ref={markdownTextContainerRef}
         maxWidth="100%"
+        width="100%"
       >
-        <ReactMarkdown
-          remarkPlugins={truncate ? [] : [remarkGfm]}
-          urlTransform={handleTransformURI}
-          components={MarkdownComponents}
-          className="markdown-body"
-        >
-          {content}
-        </ReactMarkdown>
+        {(!hideCollapsed || !collapsed) && (
+          <ReactMarkdown
+            remarkPlugins={truncate ? [] : [remarkGfm]}
+            urlTransform={handleTransformURI}
+            components={MarkdownComponents}
+            className="markdown-body"
+          >
+            {content}
+          </ReactMarkdown>
+        )}
       </Box>
 
-      {totalLines > collapsedLines && !totalLinesError && !truncate && (
+      {((hideCollapsed && content) ||
+        (totalLines > collapsedLines && !totalLinesError && !truncate)) && (
         <Button
-          marginTop={4}
-          paddingLeft={0}
           variant="text"
+          color="celery-0"
+          padding="0.25rem 0.75rem"
+          gap="0.25rem"
+          borderRadius="625rem"
+          borderColor="transparent"
+          borderWidth="1px"
+          _hover={{ bg: 'celery--6', borderColor: 'celery--6' }}
+          _active={{ bg: 'celery--6', borderWidth: '1px', borderColor: 'celery--5' }}
           onClick={handleToggleCollapse}
         >
           {t(collapsed ? 'showMore' : 'showLess')}
diff --git a/src/components/ui/proposal/ProposalCountdown.tsx b/src/components/ui/proposal/ProposalCountdown.tsx
index 03fe56a695..a09788bc2e 100644
--- a/src/components/ui/proposal/ProposalCountdown.tsx
+++ b/src/components/ui/proposal/ProposalCountdown.tsx
@@ -21,14 +21,12 @@ const zeroPad = (num: number) => String(num).padStart(2, '0');
 export function ProposalCountdown({
   proposal,
   showIcon = true,
-  textColor = 'chocolate.200',
-  textStyle = 'text-base-mono-semibold', // previous default
+  textColor = 'white-0',
 }: {
   proposal: FractalProposal;
   showIcon?: boolean;
   // custom text color and style
   textColor?: string;
-  textStyle?: string;
 }) {
   const totalSecondsLeft = useProposalCountdown(proposal);
   const { t } = useTranslation('proposal');
@@ -91,11 +89,11 @@ export function ProposalCountdown({
         >
           <Text
             color={textColor}
-            textStyle={textStyle}
+            textStyle="label-base"
           >
             {showDays && `${zeroPad(daysLeft)}:`}
             {showHours && `${zeroPad(hoursLeft)}:`}
-            {showMinutes && `${zeroPad(minutesLeft)}:`}
+            {showMinutes ? `${zeroPad(minutesLeft)}:` : '00:'}
             {showSeconds && `${zeroPad(secondsLeft)}`}
           </Text>
         </Flex>
diff --git a/src/components/ui/proposal/ProposalCreatedBy.tsx b/src/components/ui/proposal/ProposalCreatedBy.tsx
index edb5ae8a1d..91ca2475a2 100644
--- a/src/components/ui/proposal/ProposalCreatedBy.tsx
+++ b/src/components/ui/proposal/ProposalCreatedBy.tsx
@@ -1,17 +1,25 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { DisplayAddress } from '../links/DisplayAddress';
 
 function ProposalCreatedBy({ proposer }: { proposer: string }) {
   const { t } = useTranslation('proposal');
   return (
-    <Flex
+    <Box
       width="100%"
-      gap={2}
+      mt={4}
     >
-      <Text>{t('proposedBy')}</Text>
-      <DisplayAddress address={proposer} />
-    </Flex>
+      <Text
+        color="neutral-7"
+        w="full"
+      >
+        {t('proposedBy')}
+      </Text>
+      <DisplayAddress
+        address={proposer}
+        pl={0}
+      />
+    </Box>
   );
 }
 
diff --git a/src/components/ui/proposal/ProposalExecutableCode.tsx b/src/components/ui/proposal/ProposalExecutableCode.tsx
index 36e4107149..8bfe27e17b 100644
--- a/src/components/ui/proposal/ProposalExecutableCode.tsx
+++ b/src/components/ui/proposal/ProposalExecutableCode.tsx
@@ -15,15 +15,16 @@ import { useTranslation } from 'react-i18next';
 import { isAddress } from 'viem';
 import { ADDRESS_MULTISIG_METADATA } from '../../../constants/common';
 import { DecodedTransaction, FractalProposal } from '../../../types';
-import EtherscanLinkAddress from '../links/EtherscanLinkAddress';
+import EtherscanLink from '../links/EtherscanLink';
 
 function TransactionRow({ paramKey, value }: { paramKey: string; value: string }) {
   const { t } = useTranslation('proposal');
   return (
     <Flex
       width="full"
-      textStyle="text-base-mono-regular"
-      color="grayscale.100"
+      textStyle="code-snippet-base"
+      color="white-0"
+      alignItems="center"
       justifyContent="space-between"
       maxH={{ base: '12.5rem', md: 'initial' }}
       h={{ base: 'fit-content', md: 'initial' }}
@@ -37,9 +38,15 @@ function TransactionRow({ paramKey, value }: { paramKey: string; value: string }
         wordBreak="break-word"
         ml={{ base: 0, md: '0.5rem' }}
         maxW={{ base: '100%', md: '70%' }}
+        display={isAddress(value) ? 'inline-flex' : undefined}
       >
         {isAddress(value) ? (
-          <EtherscanLinkAddress address={value}>{value}</EtherscanLinkAddress>
+          <EtherscanLink
+            type="address"
+            value={value}
+          >
+            {value}
+          </EtherscanLink>
         ) : (
           value
         )}
@@ -65,7 +72,6 @@ function TransactionBlock({ transaction }: { transaction: DecodedTransaction })
           borderRadius="4px"
           bg="black.600"
           flexWrap="wrap"
-          padding={4}
           rowGap={2}
         >
           <Flex alignItems="center">
@@ -93,10 +99,10 @@ function TransactionBlock({ transaction }: { transaction: DecodedTransaction })
     <Flex
       width="full"
       borderRadius="4px"
-      bg="black.600"
+      bg="neutral-3"
       flexWrap="wrap"
-      padding={4}
-      rowGap={2}
+      padding="1rem"
+      rowGap="0.5rem"
     >
       <TransactionRow
         paramKey="paramTarget"
@@ -138,13 +144,17 @@ export default function ProposalExecutableCode({ proposal }: { proposal: Fractal
   }
   return (
     <Box
-      bg="black.900"
-      borderRadius="4px"
       marginTop={4}
-      paddingTop={2}
-      paddingBottom={2}
+      padding="1.5rem"
+      borderRadius={4}
+      bg="neutral-2"
+      border="1px solid"
+      borderColor="neutral-3"
     >
-      <Accordion allowToggle>
+      <Accordion
+        allowToggle
+        gap="1.5rem"
+      >
         <AccordionItem
           borderTop="none"
           borderBottom="none"
@@ -152,8 +162,9 @@ export default function ProposalExecutableCode({ proposal }: { proposal: Fractal
           {({ isExpanded }) => (
             <>
               <AccordionButton
-                textStyle="text-button-md-semibold"
-                color="grayscale.100"
+                p={0}
+                textStyle="display-lg"
+                color="lilac-0"
               >
                 <AccordionIcon
                   marginRight={3}
diff --git a/src/components/ui/proposal/ProposalStateBox.tsx b/src/components/ui/proposal/ProposalStateBox.tsx
deleted file mode 100644
index 68a79e2bb4..0000000000
--- a/src/components/ui/proposal/ProposalStateBox.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FractalProposalState } from '../../../types';
-import { Badge } from '../badges/Badge';
-
-interface ProposalStateBoxProps {
-  state: FractalProposalState | null;
-}
-
-export default function FractalProposalStateBox({ state }: ProposalStateBoxProps) {
-  if (!state) return null;
-
-  return (
-    <Badge
-      size="base"
-      labelKey={state}
-    />
-  );
-}
diff --git a/src/components/ui/utils/CeleryButtonWithIcon.tsx b/src/components/ui/utils/CeleryButtonWithIcon.tsx
new file mode 100644
index 0000000000..759988cff8
--- /dev/null
+++ b/src/components/ui/utils/CeleryButtonWithIcon.tsx
@@ -0,0 +1,43 @@
+import { Button, ButtonProps, Icon, Text } from '@chakra-ui/react';
+import { Icon as PhosphorIcon } from '@phosphor-icons/react';
+
+type CeleryButtonWithIconProps = {
+  icon?: PhosphorIcon;
+  text: string;
+  iconPosition?: 'start' | 'end';
+} & ButtonProps;
+
+export default function CeleryButtonWithIcon({
+  icon,
+  onClick,
+  text,
+  iconPosition = 'start',
+  ...rest
+}: CeleryButtonWithIconProps) {
+  return (
+    <Button
+      variant="text"
+      color="celery-0"
+      maxWidth="100%"
+      padding="0.25rem 0.75rem"
+      gap="0.25rem"
+      borderRadius="625rem"
+      borderColor="transparent"
+      borderWidth="1px"
+      _hover={{ bg: 'celery--6', borderColor: 'celery--6' }}
+      _active={{ bg: 'celery--6', borderWidth: '1px', borderColor: 'celery--5' }}
+      onClick={onClick}
+      {...rest}
+    >
+      {iconPosition === 'start' && icon && <Icon as={icon} />}
+      <Text
+        maxWidth="calc(100% - 1.25rem)"
+        textOverflow="ellipsis"
+        overflow="hidden"
+      >
+        {text}
+      </Text>
+      {iconPosition === 'end' && icon && <Icon as={icon} />}
+    </Button>
+  );
+}
diff --git a/src/components/ui/utils/CopyToClipboard.tsx b/src/components/ui/utils/CopyToClipboard.tsx
deleted file mode 100644
index 1f00f7df52..0000000000
--- a/src/components/ui/utils/CopyToClipboard.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IconButton } from '@chakra-ui/react';
-import { Copy } from '@decent-org/fractal-ui';
-import { toast } from 'react-toastify';
-
-function CopyToClipboard({
-  textToCopy,
-  ariaLabel = 'copy text',
-}: {
-  ariaLabel?: string;
-  textToCopy: string | undefined | null;
-}) {
-  const copyTextToClipboard = () => {
-    if (!textToCopy) return;
-    toast('Copied to clipboard', {
-      onOpen: () => navigator.clipboard.writeText(textToCopy),
-      autoClose: 1000,
-    });
-  };
-  return (
-    <IconButton
-      aria-label={ariaLabel}
-      icon={<Copy />}
-      variant="unstyled"
-      minWidth="auto"
-      onClick={copyTextToClipboard}
-    />
-  );
-}
-
-export default CopyToClipboard;
diff --git a/src/components/ui/utils/Divider.tsx b/src/components/ui/utils/Divider.tsx
new file mode 100644
index 0000000000..bb5350207e
--- /dev/null
+++ b/src/components/ui/utils/Divider.tsx
@@ -0,0 +1,22 @@
+import { Box, BoxProps } from '@chakra-ui/react';
+
+export default function Divider({
+  variant = 'dark',
+  ...rest
+}: { variant?: 'light' | 'dark' | 'darker' } & BoxProps) {
+  const isDark = variant === 'dark';
+  const isDarker = variant === 'darker';
+  // @todo - This divider should be removed and we should be using the one directly from Chakra
+  // But we need proper styling on theme level
+  return (
+    <Box
+      height="0"
+      width="100%"
+      borderTop="1px solid"
+      borderTopColor={isDarker ? '#000000AD' : isDark ? 'neutral-1' : 'neutral-2'}
+      borderBottom="1px solid"
+      borderBottomColor={isDarker ? 'white-alpha-08' : isDark ? 'neutral-3' : 'neutral-4'}
+      {...rest}
+    />
+  );
+}
diff --git a/src/components/ui/utils/ProgressBar.tsx b/src/components/ui/utils/ProgressBar.tsx
index b4e607aa8d..26e0492988 100644
--- a/src/components/ui/utils/ProgressBar.tsx
+++ b/src/components/ui/utils/ProgressBar.tsx
@@ -1,47 +1,63 @@
-import { Box, Flex, Progress, Text } from '@chakra-ui/react';
-import { Check } from '@decent-org/fractal-ui';
+import { Box, Flex, Progress, Text, Icon } from '@chakra-ui/react';
+import { Check } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface ProgressBarProps {
   value: number;
-  children?: ReactNode;
+  customValueComponent?: ReactNode;
   max?: number;
   unit?: string;
-  showValueWithinProgressBar?: boolean;
+  label: string;
+  labelWidth?: string;
+  bg?: string;
 }
 export default function ProgressBar({
   value,
-  children,
+  customValueComponent,
   max = 100,
   unit = '%',
-  showValueWithinProgressBar = true,
+  label,
+  labelWidth,
+  bg,
 }: ProgressBarProps) {
   return (
-    <Box width="full">
-      {((showValueWithinProgressBar && value > 0) || children) && (
-        <Flex
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          {children}
-          {showValueWithinProgressBar && value > 0 && (
-            <Text
-              display="inline-flex"
-              alignItems="center"
-              height="100%"
-              right="0"
-            >
-              {Math.min(value, 100)}
-              {unit}
-            </Text>
-          )}
-        </Flex>
-      )}
+    <Box
+      width="full"
+      position="relative"
+    >
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        position="absolute"
+        zIndex={2}
+        top={0}
+        width={labelWidth ? labelWidth : value > 16 ? `${Math.min(value, 100)}%` : '20%'}
+        px="1rem"
+        py="2px"
+        height="24px"
+      >
+        <Text textStyle="label-small">{label}</Text>
+        {customValueComponent ? (
+          <>{customValueComponent}</>
+        ) : (
+          <Text
+            textStyle="label-small"
+            display="inline-flex"
+            alignItems="center"
+            height="100%"
+            right="0"
+          >
+            {Math.min(value, 100)}
+            {unit}
+          </Text>
+        )}
+      </Flex>
       <Progress
         value={max !== 100 ? value : Math.min(value, 100)}
         max={max}
         maxWidth="100%"
+        bg={bg}
       />
     </Box>
   );
@@ -50,8 +66,8 @@ export default function ProgressBar({
 interface QuorumProgressBarProps {
   helperText?: string;
   unit?: string;
-  reachedQuorum: bigint;
-  totalQuorum?: bigint;
+  reachedQuorum: number;
+  totalQuorum?: number;
 }
 
 export function QuorumProgressBar({
@@ -66,35 +82,32 @@ export function QuorumProgressBar({
       flexWrap="wrap"
       marginTop={2}
     >
-      {totalQuorum !== undefined && (
-        <Flex
-          width="100%"
-          marginTop={2}
-          marginBottom={3}
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Text textStyle="text-base-sans-regular">{t('quorum', { ns: 'common' })}</Text>
-          <Text textStyle="text-base-sans-regular">
-            {reachedQuorum >= totalQuorum && (
-              <Check
-                color="green.500"
-                mr={2}
-              />
-            )}
-            {reachedQuorum.toString()}/{totalQuorum.toString()}
-          </Text>
-        </Flex>
-      )}
       <ProgressBar
-        value={Number(reachedQuorum)}
-        max={totalQuorum ? Number(totalQuorum) : undefined}
+        value={reachedQuorum}
+        max={totalQuorum}
         unit={unit}
-        showValueWithinProgressBar={false}
+        label={t('quorum', { ns: 'common' })}
+        bg="neutral-4"
+        labelWidth="100%"
+        customValueComponent={
+          totalQuorum ? (
+            <Text textStyle="label-small">
+              {reachedQuorum >= totalQuorum && (
+                <Icon
+                  color="lilac-0"
+                  mr={2}
+                  as={Check}
+                />
+              )}
+              {reachedQuorum} / {totalQuorum}
+            </Text>
+          ) : undefined
+        }
       />
       {helperText && (
         <Text
-          textStyle="text-sm-sans-regular"
+          textStyle="body-base"
+          color="neutral-7"
           marginTop={3}
         >
           {helperText}
diff --git a/src/components/ui/utils/Sort.tsx b/src/components/ui/utils/Sort.tsx
index 3bbf3753e9..f13102f0a1 100644
--- a/src/components/ui/utils/Sort.tsx
+++ b/src/components/ui/utils/Sort.tsx
@@ -1,8 +1,10 @@
-import { Flex, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
-import { ArrowDownSm } from '@decent-org/fractal-ui';
+import { Flex, Icon, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import { CaretDown } from '@phosphor-icons/react';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
+import { NEUTRAL_2_82_TRANSPARENT } from '../../../constants/common';
 import { SortBy } from '../../../types';
+import Divider from './Divider';
 
 function SortMenuItem({
   labelKey,
@@ -16,17 +18,15 @@ function SortMenuItem({
   const { t } = useTranslation();
   return (
     <MenuItem
-      py="0.5rem"
-      color="grayscale.100"
+      borderRadius="0.5rem"
+      p="0.75rem 0.5rem"
       sx={{
-        '&:hover': {
-          color: 'gold.500',
-        },
+        '&:hover': { bg: 'neutral-3' },
       }}
       data-testid={testId}
       onClick={onClick}
     >
-      <Text textStyle="text-sm-mono-semibold">{t(labelKey)}</Text>
+      <Text>{t(labelKey)}</Text>
     </MenuItem>
   );
 }
@@ -45,36 +45,51 @@ export function Sort({ sortBy, setSortBy, buttonProps }: ISort) {
     <Menu direction="ltr">
       <MenuButton
         data-testid="sort-openMenu"
-        color="gold.500"
+        color="lilac-0"
+        p="0.25rem 0.5rem"
         sx={{
           '&:hover': {
-            color: 'gold.500-hover',
+            color: 'lilac--1',
+            bg: 'white-alpha-04',
+            borderRadius: '0.25rem',
           },
         }}
         {...buttonProps}
       >
-        <Flex
-          alignItems="center"
-          color="gold.500"
-        >
-          <Text textStyle="text-sm-mono-medium">{t(sortBy)}</Text>
-          <ArrowDownSm boxSize="1.5rem" />
+        <Flex alignItems="center">
+          <Text>{t(sortBy)}</Text>
+          <Icon
+            ml="0.25rem"
+            p={1.25}
+            as={CaretDown}
+          />
         </Flex>
       </MenuButton>
+
       <MenuList
-        border="none"
-        rounded="lg"
-        shadow="menu-gold"
-        bg="grayscale.black"
-        p="0.5rem 1rem"
+        borderWidth="1px"
+        borderColor="neutral-3"
+        borderRadius="0.5rem"
+        bg={NEUTRAL_2_82_TRANSPARENT}
+        backdropFilter="auto"
+        backdropBlur="10px"
         minWidth="min-content"
         zIndex={5}
       >
+        <Text
+          px="0.5rem"
+          mt={2}
+          textStyle="helper-text-small"
+          color="neutral-7"
+        >
+          {t('sortTitle')}
+        </Text>
         <SortMenuItem
           labelKey={SortBy.Newest}
           testId="sort-newest"
           onClick={() => setSortBy(SortBy.Newest)}
         />
+        <Divider />
         <SortMenuItem
           labelKey={SortBy.Oldest}
           testId="sort-oldest"
diff --git a/src/components/ui/utils/TopErrorFallback.tsx b/src/components/ui/utils/TopErrorFallback.tsx
index 3b6d03f8dc..9e802e1733 100644
--- a/src/components/ui/utils/TopErrorFallback.tsx
+++ b/src/components/ui/utils/TopErrorFallback.tsx
@@ -1,50 +1,64 @@
-import { Box, Button, Center, Flex, Text, Link } from '@chakra-ui/react';
-import { Alert } from '@decent-org/fractal-ui';
-import { Trans, useTranslation } from 'react-i18next';
-import { CONTENT_HEIGHT } from '../../../constants/common';
-import { URL_DISCORD } from '../../../constants/url';
+import { Button, Box, Flex, Text, Image, Hide, Show } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { BASE_ROUTES } from '../../../constants/routes';
 
 export function TopErrorFallback() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+
   return (
-    <Center h={CONTENT_HEIGHT}>
-      <Box maxWidth="fit-content">
-        <Box
-          minWidth="100%"
-          h="100%"
-          minHeight="10.6rem"
-          bg="black.900-semi-transparent"
-          p="1rem"
-          borderRadius="0.5rem"
-        >
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Box
+        borderRadius="0.5rem"
+        bg="neutral-2"
+        py="2rem"
+        px={{ base: '1.25rem', md: '2rem' }}
+        overflow="hidden"
+      >
+        <Flex gap="4rem">
           <Flex
-            alignItems="center"
-            direction="column"
-            padding="1rem"
+            flexDir="column"
+            gap="1rem"
+            justifyContent="center"
+            width={{ base: 'full', md: '50%' }}
           >
-            <Alert />
-            <Text
-              textStyle="text-2xl-mono-regular"
-              color="grayscale.100"
-              marginTop="1.5rem"
-              marginBottom="1.5rem"
+            <Text textStyle="display-4xl">{t('errorSentryFallbackTitle')}</Text>
+            <Text textStyle="display-xl">{t('errorSentryFallbackMessage')}</Text>
+            <Flex
+              flexDir="column"
+              gap="1rem"
             >
-              {t('errorSentryFallbackTitle')}
-            </Text>
-            <Text marginBottom="1.5rem">
-              <Trans i18nKey="errorSentryFallbackMessage">
-                placeholder
-                <Link
-                  color="gold.500"
-                  href={URL_DISCORD}
-                  target="_blank"
+              <Hide above="md">
+                <Image
+                  src="/images/tools.svg"
+                  alt={t('errorSentryFallbackTitle')}
+                  w="50%"
+                  mx="auto"
                 />
-              </Trans>
-            </Text>
-            <Button onClick={() => window.location.reload()}>{t('reload')}</Button>
+              </Hide>
+              <Button
+                w="fit-content"
+                mx={{ base: 'auto', md: 'unset' }}
+                onClick={() => navigate(BASE_ROUTES.landing)}
+              >
+                {t('goHome')}
+              </Button>
+            </Flex>
           </Flex>
-        </Box>
+          <Show above="md">
+            <Image
+              src="/images/tools.svg"
+              alt={t('errorSentryFallbackTitle')}
+              width="100%"
+              mb="-6rem"
+            />
+          </Show>
+        </Flex>
       </Box>
-    </Center>
+    </Flex>
   );
 }
diff --git a/src/constants/common.ts b/src/constants/common.ts
index c50e79f836..0d38706695 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -1,9 +1,15 @@
-export const HEADER_HEIGHT = '4rem';
-export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT})`;
-export const BACKGROUND_SEMI_TRANSPARENT = 'black.900-semi-transparent';
+export const HEADER_HEIGHT = '4.5rem';
+const FOOTER_HEIGHT = '7.625rem';
+export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT} - ${FOOTER_HEIGHT})`;
+
+// TODO get these into `decent-ui` repo
+export const BACKGROUND_SEMI_TRANSPARENT = '#10041480';
+export const NEUTRAL_2_82_TRANSPARENT = '#221D25D6';
+
 /**
  * Max width for most informational Tooltips. However we don't add max width
  * to some Tooltips that shouldn't wrap no matter how long, such as token amounts.
  */
 export const TOOLTIP_MAXW = '18rem';
+export const CONTENT_MAXW = 'calc(100vw - 3rem)';
 export const ADDRESS_MULTISIG_METADATA = '0xdA00000000000000000000000000000000000Da0';
diff --git a/src/constants/url.ts b/src/constants/url.ts
index 3eb1fd2fb6..2307095b95 100644
--- a/src/constants/url.ts
+++ b/src/constants/url.ts
@@ -1,5 +1,5 @@
 export const URL_FAQ = 'https://docs.fractalframework.xyz/home/learn-more/faq';
-export const URL_DISCORD = 'https://chat.fractalframework.xyz/';
+export const URL_DISCORD = 'https://chat.decentdao.org/';
 export const URL_DOCS = 'https://docs.fractalframework.xyz/';
 export const URL_DOCS_GOV_TYPES = 'https://docs.fractalframework.xyz/home/rootdaos/types';
-export const URL_DECENT = 'https://www.decent-dao.org/';
+export const URL_DECENT = 'https://www.decentdao.org/';
diff --git a/src/hooks/DAO/loaders/governance/useLockRelease.ts b/src/hooks/DAO/loaders/governance/useLockRelease.ts
index 8f3b4305c9..65cd641759 100644
--- a/src/hooks/DAO/loaders/governance/useLockRelease.ts
+++ b/src/hooks/DAO/loaders/governance/useLockRelease.ts
@@ -6,7 +6,7 @@ import { DecentGovernanceAction } from '../../../../providers/App/governance/act
 import { useEthersProvider } from '../../../../providers/Ethers/hooks/useEthersProvider';
 
 /**
- * @link https://github.com/decent-dao/dcnt/blob/master/contracts/LockRelease.sol
+ * @link https://github.com/decentdao/dcnt/blob/master/contracts/LockRelease.sol
  * This hook is specifically for the LockRelease.sol contract used for the DCNT token.
  */
 export const useLockRelease = ({ onMount = true }: { onMount?: boolean }) => {
diff --git a/src/hooks/DAO/loaders/useFractalFreeze.ts b/src/hooks/DAO/loaders/useFractalFreeze.ts
index 16ce49105b..c61acd5c8c 100644
--- a/src/hooks/DAO/loaders/useFractalFreeze.ts
+++ b/src/hooks/DAO/loaders/useFractalFreeze.ts
@@ -26,7 +26,7 @@ export const useFractalFreeze = ({
   parentSafeAddress,
 }: {
   loadOnMount?: boolean;
-  parentSafeAddress?: string | null;
+  parentSafeAddress: string | null;
 }) => {
   // load key for component; helps prevent unnecessary calls
   const loadKey = useRef<string>();
@@ -36,8 +36,8 @@ export const useFractalFreeze = ({
   const baseContracts = useSafeContracts();
   const { address: account } = useAccount();
   const { getUserERC721VotingTokens } = useUserERC721VotingTokens(
-    undefined,
     parentSafeAddress,
+    undefined,
     loadOnMount,
   );
 
@@ -136,8 +136,8 @@ export const useFractalFreeze = ({
               ).toBigInt()) > 0n;
       } else if (freezeVotingType === FreezeVotingType.ERC721) {
         const { totalVotingTokenAddresses } = await getUserERC721VotingTokens(
-          undefined,
           parentSafeAddress,
+          undefined,
         );
         userHasVotes = totalVotingTokenAddresses.length > 0;
       }
diff --git a/src/hooks/DAO/proposal/useCastVote.ts b/src/hooks/DAO/proposal/useCastVote.ts
index 9a75f048b2..25b2b0d18b 100644
--- a/src/hooks/DAO/proposal/useCastVote.ts
+++ b/src/hooks/DAO/proposal/useCastVote.ts
@@ -182,7 +182,7 @@ const useCastVote = ({
               type: extendedSnapshotProposal.type,
               privacy: extendedSnapshotProposal.privacy,
               choice: encryptedChoice!,
-              app: 'fractal',
+              app: 'decent',
             });
           } else {
             await client.vote(signer.provider as ethers.providers.Web3Provider, address, {
@@ -190,7 +190,7 @@ const useCastVote = ({
               proposal: extendedSnapshotProposal.proposalId,
               type: extendedSnapshotProposal.type,
               choice,
-              app: 'fractal',
+              app: 'decent',
             });
           }
           toast.dismiss(toastId);
diff --git a/src/hooks/DAO/proposal/useUserERC721VotingTokens.ts b/src/hooks/DAO/proposal/useUserERC721VotingTokens.ts
index 02f127e5a5..7a47ea6783 100644
--- a/src/hooks/DAO/proposal/useUserERC721VotingTokens.ts
+++ b/src/hooks/DAO/proposal/useUserERC721VotingTokens.ts
@@ -26,8 +26,8 @@ import { useFractalModules } from '../loaders/useFractalModules';
  * @returns {string[]} `remainingTokenAddresses` - same as `totalVotingTokenAddresses` - repeats contract address of NFT for each token ID in `remainingTokenIds` array.
  */
 export default function useUserERC721VotingTokens(
+  safeAddress: string | null,
   proposalId?: string,
-  safeAddress?: string | null,
   loadOnMount: boolean = true,
 ) {
   const [totalVotingTokenIds, setTotalVotingTokenIds] = useState<string[]>([]);
@@ -50,7 +50,7 @@ export default function useUserERC721VotingTokens(
   const { erc721Tokens } = azoriusGovernance;
 
   const getUserERC721VotingTokens = useCallback(
-    async (_proposalId?: string, _safeAddress?: string | null) => {
+    async (_safeAddress: string | null, _proposalId?: string) => {
       const totalTokenAddresses: string[] = [];
       const totalTokenIds: string[] = [];
       const tokenAddresses: string[] = [];
@@ -203,7 +203,7 @@ export default function useUserERC721VotingTokens(
   );
 
   const loadUserERC721VotingTokens = useCallback(async () => {
-    const tokensInfo = await getUserERC721VotingTokens(proposalId, safeAddress);
+    const tokensInfo = await getUserERC721VotingTokens(safeAddress, proposalId);
     if (tokensInfo) {
       setTotalVotingTokenAddresses(tokensInfo.totalVotingTokenAddresses);
       setTotalVotingTokenIds(tokensInfo.totalVotingTokenIds);
diff --git a/src/hooks/DAO/useCastFreezeVote.ts b/src/hooks/DAO/useCastFreezeVote.ts
index 44658cdfe1..d36891e7ac 100644
--- a/src/hooks/DAO/useCastFreezeVote.ts
+++ b/src/hooks/DAO/useCastFreezeVote.ts
@@ -19,7 +19,7 @@ const useCastFreezeVote = ({
     },
   } = useFractal();
   const baseContracts = useSafeContracts();
-  const { getUserERC721VotingTokens } = useUserERC721VotingTokens(undefined, undefined, false);
+  const { getUserERC721VotingTokens } = useUserERC721VotingTokens(null, undefined, false);
 
   useEffect(() => {
     setPending(contractCallPending);
@@ -36,7 +36,7 @@ const useCastFreezeVote = ({
             baseContracts.freezeERC721VotingMasterCopyContract.asSigner.attach(
               freezeVotingContractAddress,
             );
-          return getUserERC721VotingTokens(undefined, parentAddress).then(tokensInfo =>
+          return getUserERC721VotingTokens(parentAddress, undefined).then(tokensInfo =>
             freezeERC721VotingContract['castFreezeVote(address[],uint256[])'](
               tokensInfo.totalVotingTokenAddresses,
               tokensInfo.totalVotingTokenIds,
diff --git a/src/hooks/DAO/useClawBack.ts b/src/hooks/DAO/useClawBack.ts
index 88012260af..c2c6e509a1 100644
--- a/src/hooks/DAO/useClawBack.ts
+++ b/src/hooks/DAO/useClawBack.ts
@@ -9,8 +9,8 @@ import { useCanUserCreateProposal } from '../utils/useCanUserSubmitProposal';
 import useSubmitProposal from './proposal/useSubmitProposal';
 
 interface IUseClawBack {
-  childSafeInfo?: FractalNode;
-  parentAddress?: Address | null;
+  childSafeInfo: FractalNode;
+  parentAddress: Address | null;
 }
 
 export default function useClawBack({ childSafeInfo, parentAddress }: IUseClawBack) {
@@ -21,13 +21,13 @@ export default function useClawBack({ childSafeInfo, parentAddress }: IUseClawBa
   const { canUserCreateProposal } = useCanUserCreateProposal();
 
   const handleClawBack = useCallback(async () => {
-    if (childSafeInfo && childSafeInfo.daoAddress && parentAddress && safeAPI && provider) {
+    if (childSafeInfo.daoAddress && parentAddress && safeAPI && provider) {
       const childSafeBalance = await safeAPI.getBalances(getAddress(childSafeInfo.daoAddress));
 
       const santitizedParentAddress = getAddress(parentAddress);
       const parentSafeInfo = await safeAPI.getSafeData(santitizedParentAddress);
 
-      if (canUserCreateProposal && parentAddress && childSafeInfo && parentSafeInfo) {
+      if (canUserCreateProposal && parentAddress && parentSafeInfo) {
         const fractalModule = childSafeInfo.fractalModules!.find(
           module => module.moduleType === FractalModuleType.FRACTAL,
         );
diff --git a/src/hooks/DAO/useDAOData.ts b/src/hooks/DAO/useDAOData.ts
index 7facd9f788..fd5ccd2457 100644
--- a/src/hooks/DAO/useDAOData.ts
+++ b/src/hooks/DAO/useDAOData.ts
@@ -11,7 +11,7 @@ import { useFractalGuardContracts } from './loaders/useFractalGuardContracts';
  * A hook for loading guard and freeze guard contract data for the provided
  * FractalNode.
  */
-export function useLoadDAOData(fractalNode?: FractalNode, parentAddress?: string) {
+export function useLoadDAOData(parentAddress: string | null, fractalNode?: FractalNode) {
   const [daoData, setDAOData] = useState<DAOData>();
   const loadFractalGuardContracts = useFractalGuardContracts({ loadOnMount: false });
   const loadFractalFreezeGuard = useFractalFreeze({
diff --git a/src/hooks/DAO/useDAOName.ts b/src/hooks/DAO/useDAOName.ts
index c53ccb34b8..e24f14fb63 100644
--- a/src/hooks/DAO/useDAOName.ts
+++ b/src/hooks/DAO/useDAOName.ts
@@ -9,7 +9,7 @@ import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigPro
 import { createAccountSubstring } from '../utils/useDisplayName';
 
 /**
- * Gets the 'display name' for a Fractal DAO, in the following order of preference:
+ * Gets the 'display name' for a DAO, in the following order of preference:
  *
  * 1. Primary ENS Name (reverse record)
  * 2. Fractal name registry name
@@ -75,7 +75,7 @@ export default function useDAOName({
 }
 
 /**
- * Gets the 'display name' for a Fractal DAO, in the following order of preference:
+ * Gets the 'display name' for a DAO, in the following order of preference:
  *
  * 1. Primary ENS Name (reverse record)
  * 2. Fractal name registry name
diff --git a/src/hooks/toasts/useActionToast.tsx b/src/hooks/toasts/useActionToast.tsx
deleted file mode 100644
index 049f518b15..0000000000
--- a/src/hooks/toasts/useActionToast.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Flex, Text, Button } from '@chakra-ui/react';
-import { Fragment, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
-
-// @todo this component should be made and exported from design systems
-interface IActionToast {
-  testId: string;
-  toastId: string;
-  isVisible?: boolean;
-  titleTranslationKey: string;
-  buttonTranslationKey: string;
-  buttonOnClick: () => void;
-}
-
-export function useActionToast({
-  testId,
-  toastId,
-  isVisible,
-  titleTranslationKey,
-  buttonTranslationKey,
-  buttonOnClick,
-}: IActionToast) {
-  const { t } = useTranslation();
-  useEffect(() => {
-    if (!isVisible) {
-      toast.dismiss(toastId);
-      return;
-    }
-    toast(
-      <Fragment>
-        <Flex
-          direction="column"
-          alignItems="center"
-          data-testid={testId}
-        >
-          <Text
-            textStyle="textStyles.text-sm-mono-regular"
-            color="alert-red.light"
-          >
-            {t(titleTranslationKey)}
-          </Text>
-          <Button
-            color="gold.500"
-            my="1"
-            textStyle="textStyles.text-md-mono-bold"
-            variant="text"
-            onClick={buttonOnClick}
-          >
-            {t(buttonTranslationKey)}
-          </Button>
-        </Flex>
-      </Fragment>,
-      {
-        autoClose: false,
-        closeOnClick: false,
-        draggable: false,
-        progress: 1,
-        toastId,
-      },
-    );
-  }, [buttonOnClick, buttonTranslationKey, isVisible, t, testId, titleTranslationKey, toastId]);
-}
diff --git a/src/hooks/utils/cache/useLocalDB.ts b/src/hooks/utils/cache/useLocalDB.ts
index c269aa04a0..1fb3a1ad91 100644
--- a/src/hooks/utils/cache/useLocalDB.ts
+++ b/src/hooks/utils/cache/useLocalDB.ts
@@ -26,7 +26,7 @@ export enum DBObjectKeys {
  */
 const withIndexedDB = (callback: (db: IDBDatabase) => Promise<any>) => {
   return new Promise((resolve, reject) => {
-    const openRequest = indexedDB.open('fractal', DB_VERSION);
+    const openRequest = indexedDB.open('decent', DB_VERSION);
 
     openRequest.onupgradeneeded = () => {
       const db = openRequest.result;
diff --git a/src/hooks/utils/useDisplayName.ts b/src/hooks/utils/useDisplayName.ts
index d40d1c9a0b..b42a37bb7d 100644
--- a/src/hooks/utils/useDisplayName.ts
+++ b/src/hooks/utils/useDisplayName.ts
@@ -12,8 +12,8 @@ export const createAccountSubstring = (account: string) => {
  * Primary ENS Name (reverse record), otherwise returning a truncated address in the form
  * 0xbFC4...7551
  *
- * This is intended to be used for NON Fractal DAO display names.  If you would like to get the
- * display name for a Fractal DAO, use the useDAOName hook instead.
+ * This is intended to be used for NON DAO display names.  If you would like to get the
+ * display name for a DAO, use the useDAOName hook instead.
  */
 const useDisplayName = (account?: string | null, truncate?: boolean) => {
   if (truncate === undefined) truncate = true;
diff --git a/src/hooks/utils/useSafeTransactions.ts b/src/hooks/utils/useSafeTransactions.ts
index 082aac8a2f..de91099ade 100644
--- a/src/hooks/utils/useSafeTransactions.ts
+++ b/src/hooks/utils/useSafeTransactions.ts
@@ -246,7 +246,7 @@ export const useSafeTransactions = () => {
 
           const eventSafeTxHash = multiSigTransaction.safeTxHash;
 
-          const eventType: any = isMultiSigTransaction
+          const eventType = isMultiSigTransaction
             ? ActivityEventType.Governance
             : isModuleTransaction
               ? ActivityEventType.Module
diff --git a/src/i18n/LanguageSwitcher.tsx b/src/i18n/LanguageSwitcher.tsx
index 4dccc5922d..02fdc94c15 100644
--- a/src/i18n/LanguageSwitcher.tsx
+++ b/src/i18n/LanguageSwitcher.tsx
@@ -1,5 +1,5 @@
-import { Box, Center, Hide, Text } from '@chakra-ui/react';
-import { Globe } from '@decent-org/fractal-ui';
+import { Box, Flex } from '@chakra-ui/react';
+import { GlobeSimple } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { OptionMenu } from '../components/ui/menus/OptionMenu';
 import { supportedLanguages } from '.';
@@ -14,29 +14,26 @@ export function LanguageSwitcher() {
     };
   });
   return (
-    <Center>
-      <OptionMenu
-        offset={[16, 8]}
-        trigger={
-          <Box
-            display={{ base: 'flex', md: undefined }}
-            gap={8}
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Globe
-              boxSize="1.5rem"
-              minWidth="auto"
-            />
-            <Hide above="md">
-              <Text textStyle="text-md-mono-medium">{t(i18n.language.slice(0, 2))}</Text>
-            </Hide>
+    <OptionMenu
+      offset={[-26, 8]}
+      placement="right"
+      trigger={
+        <Flex
+          pt={2}
+          pb={3}
+          pl="11px"
+        >
+          <Box w={6}>
+            <GlobeSimple size={24} />
           </Box>
-        }
-        options={supported}
-        namespace="languages"
-        tooltipKey="tooltipTitle"
-      />
-    </Center>
+          <Box ml={3}>{t('tooltipTitle')}</Box>
+        </Flex>
+      }
+      options={supported}
+      namespace="languages"
+      buttonProps={{
+        width: 'full',
+      }}
+    />
   );
 }
diff --git a/src/i18n/locales/en/breadcrumbs.json b/src/i18n/locales/en/breadcrumbs.json
index 9993f4fa21..e2871a2631 100644
--- a/src/i18n/locales/en/breadcrumbs.json
+++ b/src/i18n/locales/en/breadcrumbs.json
@@ -1,6 +1,6 @@
 {
   "headerTitle": "{{daoName}} {{subject}}",
-  "proposals": "Proposals",
+  "proposals": "All Proposals",
   "proposalNew": "New Proposal",
   "nodes": "Hierarchy",
   "treasury": "Treasury",
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
index e7cfcfd61b..111d206fd3 100644
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -4,13 +4,13 @@
   "yes": "Yes",
   "skip": "Skip",
   "next": "Next",
-  "back": "< Back",
+  "back": "Back",
   "accept": "Accept",
-  "add": "Add",
+  "add": "Add signer",
   "approve": "Approve",
   "created": "Created on",
   "create": "Create",
-  "remove": "Remove",
+  "remove": "Remove signer",
   "reject": "Reject",
   "view": "View",
   "details": "Details",
@@ -32,7 +32,7 @@
   "deploy": "Deploy",
   "abstain": "Abstain",
   "loading": "Loading...",
-  "reload": "Reload",
+  "goHome": "Go home",
   "delegate": "Delegate",
   "home": "Home",
   "labelViewDAO": "View Safe",
@@ -47,8 +47,8 @@
   "errorMinimumValue": "This value can't be less then {{minValue}}",
   "errorInvalidAddress": "Invalid ETH address",
   "errorNotProposer": "You don't have permissions to create proposal for this Safe.",
-  "errorSentryFallbackTitle": "Oops!",
-  "errorSentryFallbackMessage": "An unexpected error occurred. Try reloading or <1>ask the devs to do something</1>.",
+  "errorSentryFallbackTitle": "Something went wrong.",
+  "errorSentryFallbackMessage": "We apologize for the inconvenience. Please try again later.",
   "errorGeneral": "An unexpected error occurred. Please try again later.",
   "labelNowishAgo": "just now",
   "labelMinutesAgo": "{{count}} minutes ago",
@@ -71,6 +71,7 @@
   "labelYearsLeft_one": "{{count}} year left",
   "labelYearsLeft_other": "{{count}} years left",
   "toastClipboardCopy": "Copied to clipboard",
+  "sortTitle": "Sort",
   "newest": "Newest",
   "oldest": "Oldest",
   "filter": "Filter",
@@ -81,11 +82,11 @@
   "example": "Example",
   "or": "or",
   "abi": "ABI",
-  "abiSelectorHelper": "Select from the contract's predefined functions",
+  "abiSelectorHelper": "Select from the contract's pre-defined functions",
   "abiSelectorDescription": "Autopopulate with verified functions",
   "titleNodes": "Hierarchy",
   "404Title": "Page not found",
-  "404Button": "Fractal App Home",
+  "404Button": "Decent App Home",
   "signers": "Signers",
   "daoDetails": "Safe details",
   "signersRequired": "Signers Required",
@@ -99,12 +100,14 @@
   "refresh": "Refresh",
   "invalidSafe1": "We couldn't find a Safe at this address on {{chain}}.",
   "invalidSafe2": "Please double check the address then try again.",
-  "wrongNetwork1": "Fractal is currently connected to {{chain}}.",
+  "wrongNetwork1": "Decent is currently connected to {{chain}}.",
   "wrongNetwork2": "Try switching the app to the correct chain for your Safe.",
   "badQueryParam1": "The Safe address in the URL isn't formatted correctly",
   "badQueryParam2": "",
   "showMore": "Show More",
   "showLess": "Show Less",
+  "show": "Show",
+  "hide": "Hide",
   "poweredBy": "Powered by",
   "goTo": "Go to"
 }
diff --git a/src/i18n/locales/en/daoCreate.json b/src/i18n/locales/en/daoCreate.json
index 2259317215..8fcf83e5b8 100644
--- a/src/i18n/locales/en/daoCreate.json
+++ b/src/i18n/locales/en/daoCreate.json
@@ -1,7 +1,7 @@
 {
-  "buttonCreate": "Create a Fractal",
+  "buttonCreate": "Create a Safe DAO",
   "addNFTButton": "Import another token",
-  "labelCreateSubDAOProposal": "Create a sub-Safe",
+  "labelCreateSubDAOProposal": "Create a child Safe DAO",
   "errorLowSignerThreshold": "Threshold must be greater than 0",
   "errorHighSignerThreshold": "Threshold is too high",
   "labelSigners": "Total Signers",
@@ -22,16 +22,16 @@
   "nftDetailsToken": "Token",
   "nftDetailsWeight": "Weight",
   "n/a": "n/a",
-  "labelConnectWallet": "To deploy a new Fractal",
-  "titleFundingOptions": "Go to parent-Safe",
+  "labelConnectWallet": "To deploy a new Safe DAO",
+  "titleFundingOptions": "Go to parent Safe",
   "labelSelectNFT": "Select NFT",
   "labelNFTAddress": "NFT Address",
   "helperNFTAddress": "Import an existing ERC-721 token",
   "labelNFTWeight": "Weight",
   "helperNFTWeight": "How many votes is this token worth?",
   "labelVotingPeriod": "Voting Period",
-  "labelChooseGovernance": "Choose Governance",
-  "helperChooseGovernance": "What type of governance would you like?",
+  "labelChooseGovernance": "Select Governance",
+  "helperChooseGovernance": "How would you like to govern your DAO?",
   "exampleVotingPeriod": "10,080 minutes = 1 week",
   "helperVotingPeriod": "The length of time (in minutes) voting is allowed after proposal creation",
   "helperQuorum": "The percentage of total possible token votes required to vote on a proposal to make the result valid",
@@ -58,7 +58,7 @@
   "errorAllocation": "Invalid token allocation",
   "labelParentAllocation": "Parent token holder claiming",
   "helperParentAllocation": "The total number of tokens claimable by all parent token holders",
-  "labelAddAllocation": "+ Add Allocation",
+  "labelAddAllocation": "Add Allocation",
   "labelTokenName": "Token Name",
   "helperTokenName": "What is your governance token called?",
   "labelTokenSymbol": "Token Symbol",
@@ -66,38 +66,38 @@
   "labelTokenSupply": "Token Supply",
   "helperTokenSupply": "Total available tokens",
   "labelMultisigGov": "Safe Multisig",
-  "descMultisigGov": "Multisignature governance on a Safe{Wallet}",
+  "descMultisigGov": "Multi-signature governance on a Safe",
   "labelAzoriusErc20Gov": "Token Voting Safe",
-  "descAzoriusErc20Gov": "ERC-20 token voting governance on a Safe{Wallet}",
+  "descAzoriusErc20Gov": "ERC-20 token voting governance on a Safe",
   "labelAzoriusErc721Gov": "NFT Voting Safe",
   "descAzoriusErc721Gov": "Assign voting rights and ownership privileges to ERC-721 token holders",
-  "labelFractalName": "Fractal Name",
-  "daoNamePlaceholder": "Name of my Safe",
-  "helperFractalName": "What should we call your Safe{Wallet}?",
+  "labelDAOName": "DAO Name",
+  "daoNamePlaceholder": "Name",
+  "helperDAOName": "What is your DAO called?",
   "titleProposalSettings": "Proposal Settings",
-  "labelDeploySubDAO": "Create a sub-Safe Proposal",
-  "labelDeployAzorius": "Create Azorius deployment Proposal",
+  "labelDeploySubDAO": "Create a child Safe proposal",
+  "labelDeployAzorius": "Create Azorius deployment proposal",
   "titleAllocations": "Initial Token Allocations",
   "titleTokenParams": "Token Metadata",
-  "titleSelectToken": "Select Token",
+  "titleTokenSupply": "Token Supply",
   "titleAddress": "Address",
   "titleAmount": "Amount",
-  "createSubDAOPendingToastMessage": "Creating your sub-Safe Proposal",
+  "createSubDAOPendingToastMessage": "Creating your child Safe proposal",
   "createSubDAOSuccessToastMessage": "Deployment successful",
   "createSubDAOFailureToastMessage": "Deployment failed",
-  "helperAllocations": "Unallocated tokens will be placed in your DAO's treasury",
+  "helperAllocations": "Unallocated tokens will be placed in your Safe DAO's treasury.",
   "labelSelectToken": "Select Token",
-  "helperSelectToken": "Create a new token or use an existing ERC-20 token for your DAO's governance",
+  "helperSelectToken": "Create a new token or use an existing ERC-20 token.",
   "radioLabelNewToken": "New Token",
   "radioLabelExistingToken": "Existing Token",
   "helperNewToken": "Create a new ERC-20 token to vote with",
   "helperExistingToken": "Use an existing ERC-20 for voting",
   "warningExistingToken": "This token must be wrapped in order to be used as a voting token",
-  "warningExistingTokenTooltip": "Fractal will deploy a new ERC-20 governance token to wrap this one. Holders can deposit their tokens to vote with or withdraw them at any time.",
+  "warningExistingTokenTooltip": "Decent will deploy a new ERC-20 governance token to wrap this one. Holders can deposit their tokens to vote with or withdraw them at any time.",
   "snapshot": "Snapshot",
-  "snapshotHelper": "Does your Safe have a Snapshot space?",
-  "tooltipMultisig": "Multisig is useful when you only have a small group of decision makers that all need to sign a transaction for it pass. <1>Learn more</1>",
+  "snapshotHelper": "Does your Safe DAO have a Snapshot space?",
+  "tooltipMultisig": "Multisig is useful when you have a small group of decision makers, a subset of whom are needed to approve proposals. <1>Learn more</1>",
   "tooltipTokenVoting": "Token Voting is a method to give a larger group of ERC-20 token holders governance power to propose and vote on transactions. <1>Learn more</1>",
   "toastDisconnected": "Connect an account to proceed!",
-  "tooltipNftVoting": "NFT Voting is good practice to give a group ERC-721 (aka NFT) holders to propose and vote on transactions. Multiple NFT addresses may be used. Learn more with <1>Fractal Docs</1>"
+  "tooltipNftVoting": "NFT Voting is good practice to give a group ERC-721 (aka NFT) holders to propose and vote on transactions. Multiple NFT addresses may be used. Learn more with <1>Decent Docs</1>"
 }
diff --git a/src/i18n/locales/en/dashboard.json b/src/i18n/locales/en/dashboard.json
index 91b5e919ec..e288e81bef 100644
--- a/src/i18n/locales/en/dashboard.json
+++ b/src/i18n/locales/en/dashboard.json
@@ -1,9 +1,10 @@
 {
   "titleFavorites": "Favorites",
   "emptyFavorites": "No favorites",
+  "loadingFavorite": "Loading favorite ...",
   "errorInvalidSearch": "This is not a valid Ethereum address",
-  "errorFailedSearch": "Sorry, this address is not a Fractal or Safe{WALLET} on {{chain}}",
-  "searchDAOPlaceholder": "Enter any existing Safe address",
+  "errorFailedSearch": "Sorry, this address is not a DAO or Safe on {{chain}}",
+  "searchDAOPlaceholder": "Enter Safe Address or ENS Name",
   "titleGovernance": "Governance",
   "titleType": "Type",
   "titleVotingPeriod": "Voting Period",
@@ -15,16 +16,14 @@
   "noActivity": "No Activity",
   "proposalDescription_one": "Proposal to execute {{count}} transaction",
   "proposalDescription_other": "Proposal to execute {{count}} transactions",
-  "freezeDescription": "Freeze vote pending on sub-Safe",
-  "frozenDescription": "Safe is Frozen",
+  "freezeDescription": "Freeze vote pending on child Safe",
+  "frozenDescription": "Safe is frozen",
   "freezeButton": "Freeze",
-  "freezeVotedButton": "Vote Cast",
-  "noVotesButton": "User Has No Votes",
+  "freezeVotedButton": "Vote cast",
+  "noVotesButton": "User has no votes",
   "tipFreeze": "{{amount}} required freeze votes",
   "proposalOnChainRejection": "that rejects transaction {{proposalId}}",
   "proposalDescriptionCont": "that will",
-  "moduleDescription_one": "Module executed {{count}} transaction on",
-  "moduleDescription_other": "Module executed {{count}} transactions on",
   "alertTokenClaim": "You have {{amount}} tokens to claim!",
   "claim": "Claim"
 }
diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json
index bf2b983277..dec6a42fd6 100644
--- a/src/i18n/locales/en/home.json
+++ b/src/i18n/locales/en/home.json
@@ -1,29 +1,6 @@
 {
-  "homeTitle": "Welcome to Fractal",
-  "homeDesc": "Are you outgrowing your Multisig? Fractal extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance.",
-  "govern": "Govern",
-  "governDesc": "Choose a governance per sub-Safe. Create and authorize proposals. Decentralize on any timeline.",
-  "structure": "Structure",
-  "structureDesc": "Start with any Safe Multisig. Connect teams in flexible sub-Safe hierarchies for agile delivery.",
-  "operate": "Operate",
-  "operateDesc": "Unleash on-chain efficiency with reuseable, streamed, and permissioned transactions.",
-  "featuredTitle": "Featured Organizations",
-  "featuredDesc": "Here are some projects using Fractal to convert their Safe Multisig into DAOs as they decentralize:",
-  "decentTitle": "Decent DAO",
-  "decentDesc": "We are an open-source collective that unites builders toward global decentralization.",
-  "awakeTitle": "AwakeVC",
-  "awakeDesc": "Awake Internet Protocols combine AI and FinTech to empower Decentralized Private Equity for the multiverse. Welcome to Awakened Value Co-creation aka AwakeVC.",
-  "ethlizardsTitle": "Lizard DAO",
-  "ethlizardsDesc": "Ethlizards brings together an exceptional mix of avid gamers, visionary builders, and savvy investors, establishing itself as a highly esteemed partner in the GameFi ecosystem.",
-  "shutterTitle": "Shutter DAO 0x36",
-  "shutterDesc": "Shutter is an anti-frontrunning/malicious MEV protocol using threshold encryption. Shutter DAO 0x36 is a pragmatic, step-by-step approach towards decentralization, prioritizing community involvement and learning from each phase while maintaining operational reliability and security.",
-  "myosinTitle": "Myosin",
-  "myosinDesc": "The Ultimate Marketing Network. Supercharging growth for web3 companies & onboarding brands into the future of the internet.",
-  "featureLink": "Explore >",
-  "readyCTA": "Ready to start?",
-  "createButton": "+ Start from Scratch",
-  "homeAttribution": "Made with 💜 by <1>Decent DAO</1>",
-  "audit": "Audit",
-  "learnCTA": "Explore the Docs to see how Fractal works",
-  "getStartedButton": "Get Started"
+  "createCTA": "Create Safe",
+  "mySafes": "My Safes",
+  "docsCTA": "Read Docs",
+  "audit": "Audit"
 }
diff --git a/src/i18n/locales/en/modals.json b/src/i18n/locales/en/modals.json
index 24d4f4f2ac..b3be71b442 100644
--- a/src/i18n/locales/en/modals.json
+++ b/src/i18n/locales/en/modals.json
@@ -13,7 +13,7 @@
   "selectSublabel": "Available balance {{balance}}",
   "amountLabel": "How much?",
   "destinationLabel": "Where would you like to send this?",
-  "destinationSublabel": "Ethereum wallet address only",
+  "destinationSublabel": "Ethereum wallet address or ENS only",
   "sendAssetsSubmit": "Submit Proposal",
   "sendAssetsPendingToastMessage": "Creating proposal to send assets",
   "sendAssetsSuccessToastMessage": "Send assets proposal successfully created",
@@ -32,7 +32,7 @@
   "submit": "Submit",
   "createProposal": "Create Proposal",
   "removeSignerTitle": "Remove Signer",
-  "removeSignerLabel": "Review the signer to remove",
+  "removeSignerLabel": "Removing signer",
   "addSignerPendingToastMessage": "Creating proposal to add signer",
   "addSignerSuccessToastMessage": "Add signer proposal successfully created",
   "addSignerFailureToastMessage": "Add signer proposal failed",
@@ -63,5 +63,6 @@
   "updateSignersTooltip": "The number of signers required to pass future proposals",
   "confirmModifyGovernanceTitle": "Heads up this is a big deal!",
   "confirmModifyGovernanceDescription": "Modifying your Safe's governance will change a lot of things that you should be aware of before you proceed",
-  "stakeTitle": "Stake"
+  "stakeTitle": "Stake",
+  "removeSignerWarning": "This signer will be removed from the the organization"
 }
diff --git a/src/i18n/locales/en/navigation.json b/src/i18n/locales/en/navigation.json
index 9a8f2c0b73..e84e92bbb7 100644
--- a/src/i18n/locales/en/navigation.json
+++ b/src/i18n/locales/en/navigation.json
@@ -7,12 +7,9 @@
   "faq": "FAQ",
   "discord": "Discord",
   "documentation": "Documentation",
-  "ariaLabelFractalBrand": "Navigate Fractal Home",
+  "ariaLabelFractalBrand": "Navigate Decent Home",
   "ariaLabelHome": "Navigate Safe Home",
   "ariaLabelProposals": "Navigate Safe Proposals",
   "ariaLabelActivities": "Navigate Safe Activities",
-  "ariaLabelTreasury": "Navigate Safe Treasury",
-  "ariaLabelFAQ": "Link to FAQ",
-  "ariaLabelDiscord": "Link to Discord",
-  "ariaLabelDocumentation": "Link to documentation"
+  "ariaLabelTreasury": "Navigate Safe Treasury"
 }
diff --git a/src/i18n/locales/en/proposal.json b/src/i18n/locales/en/proposal.json
index 44af3c0e58..c459ca5850 100644
--- a/src/i18n/locales/en/proposal.json
+++ b/src/i18n/locales/en/proposal.json
@@ -1,14 +1,16 @@
 {
   "proposalOverview": "Proposal Overview",
   "breakdownTitle": "Breakdown",
+  "functionHeader": "Function",
   "labelTargetAddress": "Target Address",
-  "helperTargetAddress": "The smart contract address this proposal will modify. Paste an address and we'll try to fetch the ABI for this contract.",
-  "labelFunctionName": "Function Name",
+  "helperTargetAddress": "The smart contract address this proposal will modify. Ethereum or ENS only.",
+  "labelFunctionName": "Name",
   "helperFunctionName": "The name of the function to be called if this proposal passes",
   "labelFunctionSignature": "Function Signature",
   "helperFunctionSignature": "The parameter types of the function (above) to be called",
   "labelParameters": "Parameters",
   "helperParameters": "Parameters used to call the function (comma separated)",
+  "addParameter": "Add another parameter",
   "labelEthValue": "ETH Value",
   "helperEthValue": "Amount of ETH to send with the transaction (from your treasury)",
   "ownerApproved": "Approved",
@@ -43,9 +45,9 @@
   "noProposal": "No proposal found",
   "emptyProposals": "No proposals found",
   "createProposal": "Create Proposal",
-  "labelAddTransaction": "+ Add Transaction",
+  "labelAddTransaction": "Add another transaction",
   "errorInvalidFragments": "Invalid combination of function signature and parameters",
-  "proposalSummaryTitle": "Proposal Details",
+  "proposalSummaryTitle": "Details",
   "proposalSummaryStartDate": "Start Date",
   "proposalSummaryEndDate": "End Date",
   "snapshotTaken": "Snapshot taken",
@@ -54,15 +56,15 @@
   "show": "Show",
   "proposalSupportERC20SummaryHelper": "Minimum {{quorum}}% required out of {{total}}",
   "proposalSupportERC721SummaryHelper": "Minimum {{quorum}} token votes required out {{total}}",
-  "proposedBy": "Proposed by",
+  "proposedBy": "Proposed By",
   "proposalTitle_one": "Proposal to execute {{count}} transaction on {{target}}",
   "proposalTitle_other": "Proposal to execute {{count}} transactions on {{target}}",
   "proposalTitle": "Proposal Title",
   "proposalTitleHelper": "A short title for this proposal",
-  "proposalTitlePlaceholder": "A new proposal",
+  "proposalTitlePlaceholder": "Title",
   "proposalDescription": "Proposal Description",
   "proposalDescriptionHelper": "Add a brief description, markdown supported",
-  "proposalDescriptionPlaceholder": "A brief description",
+  "proposalDescriptionPlaceholder": "Description",
   "proposalAdditionalResources": "Additional Resources",
   "proposalAdditionalResourcesHelper": "A link to any discussion or formal documentation",
   "proposalAdditionalResourcesPlaceholder": "https://",
@@ -77,6 +79,7 @@
   "filterProposalsNSelected": "Filter {{count}}",
   "filter": "Filter",
   "transaction": "Transaction",
+  "parameter": "Parameter",
   "proposal": "Proposal",
   "transactionExecutionAlertMessage": "Transactions execute in the order they are added",
   "labelProposalVotingPeriod": "Voting Period",
@@ -89,7 +92,7 @@
   "txDetailsSignersRequired": "Signers Required",
   "created": "Created",
   "transactionHash": "Transaction Hash",
-  "proposalId": "Proposal Id",
+  "proposalId": "Proposal ID",
   "pendingSign": "Use wallet to sign transaction",
   "failedSign": "Signing failed",
   "successSign": "Signing successful",
@@ -103,10 +106,11 @@
   "paramValue": "transaction value",
   "multisigMetadataMessage": "This transaction contains the proposal's encoded metadata.",
   "multisigMetadataWarning": "Adding metadata (title, description, url) to a multisig proposal will add execution cost.",
-  "decodingFailedMessage": "Unable to decode transaction's data.",
+  "decodingFailedMessage": "We are unable to retrieve transaction details at this time.",
   "encodingFailedMessage": "Unable to encode proposal data.",
-  "customNonce": "Custom Nonce",
-  "customNonceTooltip": "Set a custom proposal nonce if necessary to prevent nonce collisions",
+  "customNonce": "Custom Nonce (advanced)",
+  "customNonceTrimmed": "Custom Nonce",
+  "customNonceTooltip": "Optionally set a custom proposal nonce to avoid collisions.",
   "nonce": "Nonce",
   "votingTooltip": "Time remaining to cast your vote.",
   "timeLockedTooltip": "This proposal can be executed once its timelock period has passed.",
diff --git a/src/i18n/locales/en/proposalTemplate.json b/src/i18n/locales/en/proposalTemplate.json
index 8c1a22796f..8d437aced2 100644
--- a/src/i18n/locales/en/proposalTemplate.json
+++ b/src/i18n/locales/en/proposalTemplate.json
@@ -7,11 +7,16 @@
   "preview": "Preview",
   "previewTitle": "Title",
   "previewThumnbail": "Thumbnail",
-  "labelFunctionParameter": "Function Parameter",
+  "labelFunctionParameter": "Parameter",
   "helperFunctionParameter": "The parameter of the function of the above smart contract to be called",
-  "labelParameterLabel": "Parameter Label",
-  "helperParameterLabel": "Add a label for a blank input",
+  "labelParameterLabel": "Label for user input",
+  "labelParameterLabelHelper": "Create a blank input field for the user to update by adding a label name here",
+  "parameterLabelPlaceholder": "How much would you like to transfer?",
+  "helperParameterLabel": "Ask the user for input",
   "labelParameterValue": "Parameter Value",
+  "labelParameterValueWithLabel": "Assign a value",
+  "labelParameterValueHelper": "Or hardcode a value into the smart contract here.",
+  "helperFunctionParameterValue": "Value of the above parameter to pass into the function above.",
   "proposalTemplateLeaveBlank": "or leave blank to allow for user input",
   "parameter": "Parameter",
   "value": "Value",
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index b6f67ee934..5a30658a12 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -8,16 +8,16 @@
   "governanceTokenWeightLabel": "Token Weight",
   "governanceTokenTotalWeightLabel": "Total Weight",
   "governanceTokenSupplyLabel": "Total Supply",
-  "noModulesAttached": "No Modules Attached",
-  "noGuardAttached": "No Guard Attached",
+  "noModulesAttached": "No modules attached",
+  "noGuardAttached": "No guard attached",
   "modulesTitle": "Modules",
   "guardTitle": "Guard",
   "modulesAndGuardsTitle": "Modules and Guards",
   "modulesAndGuardsDescription1": "Modules are contracts added to extends a Safe's capabilities.",
-  "modulesAndGuardsDescription2": "A Freeze Guard is added to all sub-Safes created on Fractal. A Freeze Guard allow the parent Safe's members to block the sub-Safe's access to funds and freeze active proposals.",
+  "modulesAndGuardsDescription2": "A Freeze Guard is added to all child Safes created on Decent. A Freeze Guard allow the parent Safe's members to block the sub-Safe's access to funds and freeze active proposals.",
   "daoMetadataName": "Safe Name",
   "daoMetadataSnapshot": "Snapshot Space",
-  "daoMetadataDescriptionTitle": "Safe Metadata & Off-chain",
+  "daoMetadataDescriptionTitle": "Safe Metadata & offchain",
   "daoMetadataDescriptionText": "Activities or transactions that occur outside of the blockchain network or aren't stored on-chain.",
-  "proposeChanges": "Propose Changes"
+  "proposeChanges": "Propose Change"
 }
diff --git a/src/i18n/locales/en/treasury.json b/src/i18n/locales/en/treasury.json
index 531a8c353f..c8e533314a 100644
--- a/src/i18n/locales/en/treasury.json
+++ b/src/i18n/locales/en/treasury.json
@@ -12,7 +12,9 @@
   "labelSent": "Sent",
   "labelReceived": "Received",
   "textEmptyTransactions": "No transfers yet",
-  "textMoreTransactions": "View more",
+  "transactionsShownCount": "Latest {{count}} from a total of",
+  "transactionsTotalCount": "{{count}} transactions",
+  "textMoreTransactions": "Load More",
   "addresses": "{{numOfAddresses}} addresses",
   "approveToken": "Approve Token",
   "approvalPendingMessage": "Approving tokens...",
diff --git a/src/i18n/locales/uk/common.json b/src/i18n/locales/uk/common.json
index 14536ea474..cd5f730c30 100644
--- a/src/i18n/locales/uk/common.json
+++ b/src/i18n/locales/uk/common.json
@@ -23,7 +23,7 @@
   "deploy": "Створити",
   "abstain": "Утриматись",
   "loading": "Завантаження...",
-  "reload": "Перезавантажити",
+  "goHome": "Перезавантажити",
   "delegate": "Делегувати",
   "home": "Головна",
   "labelEtherscan": "Переглянути на Etherscan",
diff --git a/src/i18n/locales/uk/daoCreate.json b/src/i18n/locales/uk/daoCreate.json
index 9f559eda3d..ef1ffb7f09 100644
--- a/src/i18n/locales/uk/daoCreate.json
+++ b/src/i18n/locales/uk/daoCreate.json
@@ -1,5 +1,5 @@
 {
-  "buttonCreate": "Створити Fractal",
+  "buttonCreate": "Створити Decent",
   "errorLowSignerThreshold": "Поріг голосів має бути більше ніж 0",
   "errorHighSignerThreshold": "Поріг голосів зависокий",
   "labelSigners": "Загалом підписантів",
@@ -11,7 +11,6 @@
   "titleSafeConfig": "Конфігурація Multisig",
   "titleSignerConfig": "Параметри підписантів",
   "titleGovConfig": "Скласти систему управління",
-  "labelSelectToken": "Обрати Токен",
   "labelVotingPeriod": "Період голосування",
   "labelChooseGovernance": "Обрати систему управління",
   "helperChooseGovernance": "Яку схему управління ви б хотіли?",
@@ -32,7 +31,7 @@
   "labelFreezePeriod": "Період заморозки",
   "exampleFreezePeriod": "10080 хвилин = 1 тиждень",
   "errorDuplicateAddress": "Така адреса вже додана",
-  "labelAddAllocation": "+ Додати Розподілення",
+  "labelAddAllocation": "Додати Розподілення",
   "labelTokenName": "Ім'я токену",
   "helperTokenName": "Як ваш токен голосування буде називатись?",
   "labelTokenSymbol": "Символ токену",
@@ -40,7 +39,7 @@
   "labelTokenSupply": "Загальний випуск",
   "helperTokenSupply": "Загальна кількість доступних токенів",
   "descAzoriusGov": "Схема управління голосуванням ERC-20 токенами на контракті Safe{Wallet} гаманцю",
-  "labelFractalName": "Ім'я Fractal-у",
+  "labelDAOName": "Ім'я DAO",
   "titleProposalSettings": "Налаштування пропозицій",
   "titleAllocations": "Первинне розподілення токенів",
   "titleTokenParams": "Метадані токену",
@@ -49,5 +48,5 @@
   "createSubDAOPendingToastMessage": "Створюємо пропозицію subDAO деплойменту",
   "createSubDAOSuccessToastMessage": "Деплоймент закінчено успішно",
   "createSubDAOFailureToastMessage": "Несподівана бавовна. Деплоймент провалено",
-  "helperAllocations": "Неросподілені токени будуть надіслани до скарбниці вашого DAO"
+  "helperAllocations": "Неросподілені токени будуть надіслани до скарбниці вашого DAO."
 }
diff --git a/src/i18n/locales/uk/dashboard.json b/src/i18n/locales/uk/dashboard.json
index 57b3b5ef87..8e9339c5b3 100644
--- a/src/i18n/locales/uk/dashboard.json
+++ b/src/i18n/locales/uk/dashboard.json
@@ -1,7 +1,7 @@
 {
   "titleFavorites": "Вподобані",
   "emptyFavorites": "Нема вподобайок",
-  "errorFailedSearch": "Вибачте, ця адреса - ані Safe{Wallet} ані Fractal",
+  "errorFailedSearch": "Вибачте, ця адреса - ані Safe ані Decent",
   "titleGovernance": "Система Управління",
   "titleType": "Тип",
   "titleVotingPeriod": "Період голосування",
@@ -17,7 +17,5 @@
   "noVotesButton": "Користувач на має голосів",
   "tipFreeze": "{{amount}} необхідні голоси замороження",
   "proposalOnChainRejection": "що відхиляє транзакцію # {{proposalId}}",
-  "proposalDescriptionCont": "що буде",
-  "moduleDescription_one": "Виконано {{count}} транзакцію через модуль за адресою",
-  "moduleDescription_other": "Виконано {{count}} транзакцій через модуль за адресою(ми)"
+  "proposalDescriptionCont": "що буде"
 }
diff --git a/src/i18n/locales/uk/home.json b/src/i18n/locales/uk/home.json
index e09e3a3026..0967ef424b 100644
--- a/src/i18n/locales/uk/home.json
+++ b/src/i18n/locales/uk/home.json
@@ -1,3 +1 @@
-{
-  "homeAttribution": "Зроблено за допомогою 💜 компанією <1>Decent DAO</1>"
-}
+{}
diff --git a/src/i18n/locales/uk/navigation.json b/src/i18n/locales/uk/navigation.json
index 8d5d9cc54b..fe42ec7144 100644
--- a/src/i18n/locales/uk/navigation.json
+++ b/src/i18n/locales/uk/navigation.json
@@ -4,8 +4,5 @@
   "treasury": "Скарбниця",
   "faq": "FAQ",
   "documentation": "Документація",
-  "ariaLabelFractalBrand": "Перейти до Головної",
-  "ariaLabelFAQ": "Посилання на FAQ",
-  "ariaLabelDiscord": "Посилання на Discord",
-  "ariaLabelDocumentation": "Посилання на документацію"
+  "ariaLabelFractalBrand": "Перейти до Головної"
 }
diff --git a/src/i18n/locales/uk/proposal.json b/src/i18n/locales/uk/proposal.json
index 5dba861c5a..21cc1cc908 100644
--- a/src/i18n/locales/uk/proposal.json
+++ b/src/i18n/locales/uk/proposal.json
@@ -78,7 +78,7 @@
   "paramTypes": "тип параметрів",
   "paramInputs": "значення параметрів",
   "paramValue": "значення транзакції",
-  "decodingFailedMessage": "Неможливо декодувати дані транзакції",
+  "decodingFailedMessage": "Нам не вдалось отримати деталі транзакції цього разу",
   "customNonce": "Власний Nonce",
   "customNonceTooltip": "Зазначте власний nonce пропозиції, якщо необхідно, щоб попередити колізію",
   "nonce": "Nonce",
diff --git a/src/main.tsx b/src/main.tsx
index 3bcd4fc12d..6ac68969af 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,9 +4,7 @@ import { RouterProvider } from 'react-router-dom';
 import { useNetworkConfig } from './providers/NetworkConfig/NetworkConfigProvider';
 import Providers from './providers/Providers';
 import { router } from './router';
-
-import '@fontsource/ibm-plex-mono';
-import '@fontsource/ibm-plex-sans';
+import '@fontsource/space-mono';
 import 'react-toastify/dist/ReactToastify.min.css';
 import './assets/css/Markdown.css';
 
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index bccbe9c8ed..f2c8d111e1 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,6 +1,5 @@
-import { AbsoluteCenter, Button, ChakraProvider, Image, Text, VStack } from '@chakra-ui/react';
-import '@fontsource/ibm-plex-mono';
-import '@fontsource/ibm-plex-sans';
+import { AbsoluteCenter, Button, ChakraProvider, Icon, Text, VStack } from '@chakra-ui/react';
+import { DecentLogo } from '@decent-org/fractal-ui';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { theme } from '../assets/theme';
@@ -18,24 +17,22 @@ export default function FourOhFourPage() {
       <I18nextProvider i18n={i18n}>
         <AbsoluteCenter>
           <VStack>
-            <Image
-              width={252}
-              height={48}
-              src="/images/fractal-text-logo.svg"
-              alt="Fractal Logo"
+            <Icon
+              as={DecentLogo}
+              width={20}
+              height={20}
             />
             <Text
               paddingTop="3.25rem"
               data-testid="404-pageCode"
-              textStyle="text-6xl-mono-regular"
-              color="grayscale.100"
+              textStyle="display-3xl"
+              color="neutral-6"
             >
               404
             </Text>
             <Text
               data-testid="404-pageTitle"
-              textStyle="text-mono-regular"
-              color="grayscale.100"
+              color="neutral-7"
               marginTop="0.5rem"
               paddingBottom="3.25rem"
             >
diff --git a/src/pages/DAOController.tsx b/src/pages/DAOController.tsx
index f2f4ef00d3..7c7155a05f 100644
--- a/src/pages/DAOController.tsx
+++ b/src/pages/DAOController.tsx
@@ -1,13 +1,17 @@
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { theme } from '@decent-org/fractal-ui';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Outlet } from 'react-router-dom';
 import useDAOController from '../hooks/DAO/useDAOController';
 import useDAOMetadata from '../hooks/DAO/useDAOMetadata';
+import { useFractal } from '../providers/App/AppProvider';
 import LoadingProblem from './LoadingProblem';
 
 export default function DAOController() {
   const { errorLoading, wrongNetwork, invalidQuery } = useDAOController();
+  const {
+    node: { daoName },
+  } = useFractal();
   const daoMetadata = useDAOMetadata();
   const activeTheme = useMemo(() => {
     if (daoMetadata && daoMetadata.bodyBackground) {
@@ -32,6 +36,16 @@ export default function DAOController() {
     return theme;
   }, [daoMetadata]);
 
+  useEffect(() => {
+    if (daoName) {
+      document.title = `${import.meta.env.VITE_APP_NAME} | ${daoName}`;
+    }
+
+    return () => {
+      document.title = import.meta.env.VITE_APP_NAME;
+    };
+  }, [daoName]);
+
   let display;
 
   if (import.meta.env.VITE_APP_TESTING_ENVIRONMENT) {
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 2d68e728bb..d06bae9f12 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,254 +1,74 @@
-import { Center, VStack, Text, Button, Flex, Box } from '@chakra-ui/react';
-
+import { Box, Flex } from '@chakra-ui/react';
+import { DecentSignature } from '@decent-org/fractal-ui';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { mainnet, sepolia } from 'wagmi/chains';
-import { AppFooter } from '../components/pages/AppHome/AppFooter';
-import { CTABox } from '../components/pages/AppHome/CTABox';
-import FeaturedDAOCard from '../components/pages/AppHome/FeaturedDAOCard';
-import ValueProposition from '../components/pages/AppHome/ValueProposition';
+import { Link } from 'react-router-dom';
 import ExternalLink from '../components/ui/links/ExternalLink';
+import { DAOSearch } from '../components/ui/menus/DAOSearch';
 import { BASE_ROUTES } from '../constants/routes';
 import { URL_DOCS } from '../constants/url';
 import { useFractal } from '../providers/App/AppProvider';
-import { useNetworkConfig } from '../providers/NetworkConfig/NetworkConfigProvider';
-
-const VALUE_PROPS = [
-  {
-    iconSrc: '/images/icon-structure.svg',
-    titleKey: 'structure',
-    descKey: 'structureDesc',
-  },
-  {
-    iconSrc: '/images/icon-operate.svg',
-    titleKey: 'operate',
-    descKey: 'operateDesc',
-  },
-  {
-    iconSrc: '/images/icon-govern.svg',
-    titleKey: 'govern',
-    descKey: 'governDesc',
-  },
-];
-
-interface Feature {
-  iconSrc: string;
-  titleKey: string;
-  descKey: string;
-  network: string;
-  address: string;
-}
-
-// featured DAOs are dependent on the connected chain
-const FEATURED_DAOS = new Map<number, Feature[]>([
-  [
-    mainnet.id,
-    [
-      {
-        iconSrc: '/images/shutter-icon-only-logo.svg',
-        titleKey: 'shutterTitle',
-        descKey: 'shutterDesc',
-        network: 'eth',
-        address: '0x36bD3044ab68f600f6d3e081056F34f2a58432c4',
-      },
-      {
-        iconSrc: '/images/icon-decent.svg',
-        titleKey: 'decentTitle',
-        descKey: 'decentDesc',
-        network: 'eth',
-        address: '0xD26c85D435F02DaB8B220cd4D2d398f6f646e235',
-      },
-      {
-        iconSrc: '/images/icon-awakevc.svg',
-        titleKey: 'awakeTitle',
-        descKey: 'awakeDesc',
-        network: 'eth',
-        address: '0xdD6CeFA62239272f1eDf755ba6471eacb7DF2Fa5',
-      },
-    ],
-  ],
-  [
-    sepolia.id,
-    [
-      {
-        iconSrc: '/images/icon-myosin.svg',
-        titleKey: 'myosinTitle',
-        descKey: 'myosinDesc',
-        network: 'sep',
-        address: '0xdef90A94273a1A1A72B33D39129fa41E6C08Be3a',
-      },
-    ],
-  ],
-]);
 
 export default function HomePage() {
-  const { t } = useTranslation('home');
-  const navigate = useNavigate();
-  const createDAO = () => {
-    navigate(BASE_ROUTES.create);
-  };
   const {
     node: { daoAddress },
     action,
   } = useFractal();
 
+  const { t } = useTranslation('home');
+
   useEffect(() => {
+    // TODO is this needed here?
     if (daoAddress) {
       action.resetDAO();
     }
   }, [daoAddress, action]);
 
-  const { chain } = useNetworkConfig();
-  const features = FEATURED_DAOS.get(chain.id);
-
   return (
-    <Center>
-      <VStack
-        maxW={{ md: '80%', sm: '95%' }}
-        alignItems="start"
-        paddingTop="6.25rem"
-        paddingBottom="6.25rem"
+    <Flex
+      direction="column"
+      gap="1rem"
+      alignItems="center"
+    >
+      <DecentSignature
+        marginTop="2rem"
+        height="auto"
+        width="8rem"
+      />
+      <DAOSearch />
+      <Flex
+        direction="column"
+        w="full"
+        gap="0.5rem"
       >
-        <Text
-          paddingBottom="1.5rem"
-          textStyle={{
-            base: 'text-2xl-mono-regular',
-            sm: 'text-4xl-mono-regular',
-            md: 'text-6xl-mono-regular',
-          }}
-          color="grayscale.100"
-        >
-          {t('homeTitle')}
-        </Text>
-        <Center>
-          <Flex
-            paddingBottom="2rem"
-            alignItems="center"
-            flexWrap="wrap"
+        <Link to={BASE_ROUTES.create}>
+          <Box
+            w="full"
+            px="1rem"
+            pt="2rem"
+            pb="1rem"
+            bgColor="neutral-3"
+            border="1px"
+            borderColor="neutral-4"
+            borderRadius="8px"
           >
-            <Text
-              width={{ md: '100%', lg: '65%' }}
-              textStyle="text-lg-mono-regular"
-              color="grayscale.300"
-              paddingEnd="1rem"
-              marginBottom="2rem"
-            >
-              {t('homeDesc')}
-            </Text>
-            <Button
-              width={{ md: '100%', lg: '35%' }}
-              h="3.5rem"
-              onClick={createDAO}
-              variant="tertiary"
-              marginBottom="2rem"
-            >
-              {t('createButton')}
-            </Button>
-          </Flex>
-        </Center>
-        <Flex
-          paddingBottom="2rem"
-          flexWrap="wrap"
+            {t('createCTA')}
+          </Box>
+        </Link>
+        <Box
+          w="full"
+          px="1rem"
+          pt="2rem"
+          pb="1rem"
+          bgColor="neutral-3"
+          border="1px"
+          borderColor="neutral-4"
+          borderRadius="8px"
         >
-          {VALUE_PROPS.map((daoAction, index) => {
-            return (
-              <ValueProposition
-                paddingBottom="2rem"
-                width={{ md: '100%', lg: '33%' }}
-                key={daoAction.titleKey}
-                iconSrc={daoAction.iconSrc}
-                title={t(daoAction.titleKey)}
-                desc={t(daoAction.descKey)}
-                paddingEnd={index !== VALUE_PROPS.length - 1 ? '2rem' : '0rem'}
-              />
-            );
-          })}
-        </Flex>
-        <CTABox
-          leftSlot={
-            <ExternalLink href={URL_DOCS}>
-              <Button>{t('getStartedButton')}</Button>
-            </ExternalLink>
-          }
-          rightSlot={
-            <Text
-              textStyle="text-xl-mono-bold"
-              color="chocolate.100"
-            >
-              {t('learnCTA')}
-            </Text>
-          }
-        />
-        {features && features.length > 0 ? (
-          <>
-            <Text
-              paddingTop="3.5rem"
-              textStyle="text-lg-mono-bold"
-              color="grayscale.100"
-            >
-              {t('featuredTitle')}
-            </Text>
-            <Text
-              color="grayscale.500"
-              paddingBottom="1.5rem"
-            >
-              {t('featuredDesc')}
-            </Text>
-            <Flex
-              flexWrap="wrap"
-              paddingBottom="1.5rem"
-            >
-              {features.map((feature, index) => {
-                if (
-                  typeof location !== 'undefined' &&
-                  location.pathname === 'app.fractalframework.xyz'
-                ) {
-                  return null;
-                }
-                return (
-                  <FeaturedDAOCard
-                    width={{ sm: '100%', lg: '50%' }}
-                    key={feature.titleKey}
-                    iconSrc={feature.iconSrc}
-                    title={t(feature.titleKey)}
-                    desc={t(feature.descKey)}
-                    network={feature.network}
-                    address={feature.address}
-                    marginBottom="2rem"
-                    paddingEnd={{ sm: '0rem', lg: index % 2 === 0 ? '0.56rem' : '0rem' }}
-                    paddingStart={{ sm: '0rem', lg: index % 2 === 1 ? '0.56rem' : '0rem' }}
-                  />
-                );
-              })}
-            </Flex>
-          </>
-        ) : (
-          // if there are no features just show padding
-          <Box h="2rem"></Box>
-        )}
-        <CTABox
-          leftSlot={
-            <Text
-              textStyle="text-xl-mono-bold"
-              color="chocolate.100"
-            >
-              {t('readyCTA')}
-            </Text>
-          }
-          rightSlot={
-            <Button
-              data-testid="home-linkCreate"
-              h="3.5rem"
-              onClick={createDAO}
-              variant="tertiary"
-            >
-              {t('createButton')}
-            </Button>
-          }
-        />
-        <AppFooter />
-      </VStack>
-    </Center>
+          {t('mySafes')}
+        </Box>
+      </Flex>
+      <ExternalLink href={URL_DOCS}>{t('docsCTA')}</ExternalLink>
+    </Flex>
   );
 }
diff --git a/src/pages/LoadingProblem.tsx b/src/pages/LoadingProblem.tsx
index a0083adff0..b20015b24f 100644
--- a/src/pages/LoadingProblem.tsx
+++ b/src/pages/LoadingProblem.tsx
@@ -1,5 +1,10 @@
-import { Center, Text, VStack } from '@chakra-ui/react';
+import { Center, Text, Flex, Box, Show, Hide } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import {
+  StetoscopeIllustrationMobile,
+  StetoscopeIllustrationDesktop,
+} from '../components/ui/icons/Icons';
+import { CONTENT_MAXW } from '../constants/common';
 import { useNetworkConfig } from '../providers/NetworkConfig/NetworkConfigProvider';
 
 function LoadingProblem({ type }: { type: 'invalidSafe' | 'wrongNetwork' | 'badQueryParam' }) {
@@ -8,19 +13,50 @@ function LoadingProblem({ type }: { type: 'invalidSafe' | 'wrongNetwork' | 'badQ
 
   return (
     <Center
-      padding="3rem"
-      textColor="grayscale.100"
+      px={{ base: 0, lg: '3.5rem' }}
+      maxW={CONTENT_MAXW}
     >
-      <VStack>
-        <Text
-          paddingTop="3rem"
-          textStyle="text-6xl-mono-regular"
+      <Flex
+        bg="neutral-2"
+        border="1px solid"
+        borderColor="neutral-3"
+        borderRadius={8}
+        justifyContent={{ base: 'center', lg: 'space-between' }}
+        w={{ base: '100%', lg: '93%' }}
+        pl={{ base: '1.5rem', lg: '3rem' }}
+        pr={{ base: '1.5rem', lg: 0 }}
+        pt={{ base: '1.5rem', lg: '2rem' }}
+        flexWrap={{ base: 'wrap', lg: 'nowrap' }}
+      >
+        <Box
+          w={{ base: 'full', lg: '250px' }}
+          color="white-0"
+          pt={{ base: 0, lg: '2.25rem' }}
+          pb={{ base: '1.5rem', lg: '4.5rem' }}
         >
-          {t('errorSentryFallbackTitle')}
-        </Text>
-        <Text>{t(`${type}1`, { chain: chain.name })}</Text>
-        <Text paddingBottom="1rem">{t(`${type}2`)}</Text>
-      </VStack>
+          <Text
+            w="full"
+            textStyle={{ base: 'display-2xl', lg: 'display-4xl' }}
+          >
+            {t('errorSentryFallbackTitle')}
+          </Text>
+          <Text
+            textStyle={{ base: 'display-lg', lg: 'display-xl' }}
+            mt="0.5rem"
+          >
+            {t(`${type}1`, { chain: chain.name })}
+          </Text>
+          <Text textStyle={{ base: 'display-lg', lg: 'display-xl' }}>{t(`${type}2`)}</Text>
+        </Box>
+        <Flex alignItems="flex-end">
+          <Hide above="lg">
+            <StetoscopeIllustrationMobile />
+          </Hide>
+          <Show above="lg">
+            <StetoscopeIllustrationDesktop />
+          </Show>
+        </Flex>
+      </Flex>
     </Center>
   );
 }
diff --git a/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx b/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
index 1cef176884..3cff77d89c 100644
--- a/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
+++ b/src/pages/daos/[daoAddress]/DaoDashboardPage.tsx
@@ -1,8 +1,9 @@
 import { Box } from '@chakra-ui/react';
 import { Activities } from '../../../components/pages/DaoDashboard/Activities';
 import { ERCO20Claim } from '../../../components/pages/DaoDashboard/ERC20Claim';
-import { Info } from '../../../components/pages/DaoDashboard/Info';
-import InfoHeader from '../../../components/pages/DaoDashboard/Info/InfoHeader';
+import { DaoInfoHeader } from '../../../components/pages/DaoDashboard/Info/DaoInfoHeader';
+import { DaoSpecificMetadataHeader } from '../../../components/pages/DaoDashboard/Info/DaoSpecificMetadataHeader';
+import { CONTENT_MAXW } from '../../../constants/common';
 import useDAOMetadata from '../../../hooks/DAO/useDAOMetadata';
 
 export default function DaoDashboardPage() {
@@ -10,9 +11,12 @@ export default function DaoDashboardPage() {
 
   return (
     <>
-      <InfoHeader />
-      <Box mt={!!daoMetadata ? 40 : 12}>
-        <Info />
+      {daoMetadata && <DaoSpecificMetadataHeader metadata={daoMetadata} />}
+      <Box
+        mt={!!daoMetadata ? 40 : 12}
+        maxW={CONTENT_MAXW}
+      >
+        <DaoInfoHeader />
         <ERCO20Claim />
         <Activities />
       </Box>
diff --git a/src/pages/daos/[daoAddress]/settings/index.tsx b/src/pages/daos/[daoAddress]/SettingsPage.tsx
similarity index 58%
rename from src/pages/daos/[daoAddress]/settings/index.tsx
rename to src/pages/daos/[daoAddress]/SettingsPage.tsx
index f07b717839..3157709934 100644
--- a/src/pages/daos/[daoAddress]/settings/index.tsx
+++ b/src/pages/daos/[daoAddress]/SettingsPage.tsx
@@ -1,12 +1,12 @@
 import { Box, Center } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { Settings } from '../../../../components/pages/DaoSettings';
-import { BarLoader } from '../../../../components/ui/loaders/BarLoader';
-import PageHeader from '../../../../components/ui/page/Header/PageHeader';
-import { HEADER_HEIGHT } from '../../../../constants/common';
-import { useFractal } from '../../../../providers/App/AppProvider';
+import { DAOSettingsContent } from '../../../components/pages/DaoSettings/DAOSettingsContent';
+import { BarLoader } from '../../../components/ui/loaders/BarLoader';
+import PageHeader from '../../../components/ui/page/Header/PageHeader';
+import { HEADER_HEIGHT } from '../../../constants/common';
+import { useFractal } from '../../../providers/App/AppProvider';
 
-export default function SettingsPage() {
+export function SettingsPage() {
   const { t } = useTranslation('breadcrumbs');
   const {
     node: { daoAddress, daoName },
@@ -20,7 +20,7 @@ export default function SettingsPage() {
     );
   }
   return (
-    <Box mt={12}>
+    <Box>
       <PageHeader
         title={t('headerTitle', {
           daoName,
@@ -33,7 +33,7 @@ export default function SettingsPage() {
           },
         ]}
       />
-      <Settings />
+      <DAOSettingsContent />
     </Box>
   );
 }
diff --git a/src/pages/daos/[daoAddress]/edit/governance/index.tsx b/src/pages/daos/[daoAddress]/edit/governance/index.tsx
index 81d45f7550..8fb18e0829 100644
--- a/src/pages/daos/[daoAddress]/edit/governance/index.tsx
+++ b/src/pages/daos/[daoAddress]/edit/governance/index.tsx
@@ -1,6 +1,5 @@
 import { Box } from '@chakra-ui/react';
-import { CloseX } from '@decent-org/fractal-ui';
-
+import { X } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import DaoCreator from '../../../../../components/DaoCreator';
@@ -48,7 +47,7 @@ export default function ModifyGovernancePage() {
     <Box>
       <PageHeader
         hasDAOLink
-        ButtonIcon={CloseX}
+        ButtonIcon={X}
         buttonVariant="secondary"
         buttonClick={() => navigate(DAO_ROUTES.dao.relative(addressPrefix, daoAddress))}
         isButtonDisabled={false}
diff --git a/src/pages/daos/[daoAddress]/hierarchy/index.tsx b/src/pages/daos/[daoAddress]/hierarchy/index.tsx
index d9b859e2aa..61193c5abf 100644
--- a/src/pages/daos/[daoAddress]/hierarchy/index.tsx
+++ b/src/pages/daos/[daoAddress]/hierarchy/index.tsx
@@ -1,6 +1,6 @@
-import { Center } from '@chakra-ui/react';
+import { Box, Center } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { DaoNode } from '../../../../components/pages/DaoHierarchy/DaoNode';
+import { DaoHierarchyNode } from '../../../../components/pages/DaoHierarchy/DaoHierarchyNode';
 import { BarLoader } from '../../../../components/ui/loaders/BarLoader';
 import PageHeader from '../../../../components/ui/page/Header/PageHeader';
 import { HEADER_HEIGHT } from '../../../../constants/common';
@@ -26,7 +26,7 @@ export default function HierarchyPage() {
   }
 
   return (
-    <div>
+    <Box>
       <PageHeader
         title={t('headerTitle', {
           daoName,
@@ -39,10 +39,11 @@ export default function HierarchyPage() {
           },
         ]}
       />
-      <DaoNode
+      <DaoHierarchyNode
+        parentAddress={null}
         daoAddress={parentAddress || daoAddress}
         depth={0}
       />
-    </div>
+    </Box>
   );
 }
diff --git a/src/pages/daos/[daoAddress]/proposal-templates/new/index.tsx b/src/pages/daos/[daoAddress]/proposal-templates/new/index.tsx
index c705da3d42..035b6331ab 100644
--- a/src/pages/daos/[daoAddress]/proposal-templates/new/index.tsx
+++ b/src/pages/daos/[daoAddress]/proposal-templates/new/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import ProposalBuilder from '../../../../../components/ProposalBuilder';
+import { ProposalBuilder } from '../../../../../components/ProposalBuilder';
 import { DEFAULT_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { logError } from '../../../../../helpers/errorLogging';
 import useCreateProposalTemplate from '../../../../../hooks/DAO/proposal/useCreateProposalTemplate';
diff --git a/src/pages/daos/[daoAddress]/proposals/new/index.tsx b/src/pages/daos/[daoAddress]/proposals/new/index.tsx
index f4565dfb3f..cdf6aa30a3 100644
--- a/src/pages/daos/[daoAddress]/proposals/new/index.tsx
+++ b/src/pages/daos/[daoAddress]/proposals/new/index.tsx
@@ -1,6 +1,6 @@
 import { Center } from '@chakra-ui/react';
 import { useRef, useEffect } from 'react';
-import ProposalBuilder from '../../../../../components/ProposalBuilder';
+import { ProposalBuilder } from '../../../../../components/ProposalBuilder';
 import { DEFAULT_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { BarLoader } from '../../../../../components/ui/loaders/BarLoader';
 import { HEADER_HEIGHT } from '../../../../../constants/common';
diff --git a/src/pages/daos/[daoAddress]/treasury/index.tsx b/src/pages/daos/[daoAddress]/treasury/index.tsx
index ac0eb23088..35faba7f10 100644
--- a/src/pages/daos/[daoAddress]/treasury/index.tsx
+++ b/src/pages/daos/[daoAddress]/treasury/index.tsx
@@ -1,23 +1,37 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex, Show, Hide, Text, Box } from '@chakra-ui/react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Assets } from '../../../../components/pages/DAOTreasury/components/Assets';
-import { Transactions } from '../../../../components/pages/DAOTreasury/components/Transactions';
-import { useTreasuryTotalBN } from '../../../../components/pages/DAOTreasury/hooks/useTreasuryTotalBN';
+import {
+  PaginationButton,
+  PaginationCount,
+  Transactions,
+} from '../../../../components/pages/DAOTreasury/components/Transactions';
 import { TitledInfoBox } from '../../../../components/ui/containers/TitledInfoBox';
 import { ModalType } from '../../../../components/ui/modals/ModalProvider';
 import { useFractalModal } from '../../../../components/ui/modals/useFractalModal';
 import PageHeader from '../../../../components/ui/page/Header/PageHeader';
+import Divider from '../../../../components/ui/utils/Divider';
+import { CONTENT_MAXW } from '../../../../constants/common';
 import { useCanUserCreateProposal } from '../../../../hooks/utils/useCanUserSubmitProposal';
 import { useFractal } from '../../../../providers/App/AppProvider';
 
 export default function Treasury() {
   const {
     node: { daoName, daoAddress },
+    treasury: { assetsFungible, transfers },
   } = useFractal();
+  const [shownTransactions, setShownTransactions] = useState(20);
   const { t } = useTranslation('treasury');
-  const treasuryTotal = useTreasuryTotalBN();
   const { canUserCreateProposal } = useCanUserCreateProposal();
-  const showButton = canUserCreateProposal && treasuryTotal !== 0n;
+  const openSendAsset = useFractalModal(ModalType.SEND_ASSETS);
+
+  const hasAnyBalanceOfAnyFungibleTokens =
+    assetsFungible.reduce((p, c) => p + BigInt(c.balance), 0n) > 0n;
+
+  const showSendButton = canUserCreateProposal && hasAnyBalanceOfAnyFungibleTokens;
+  const totalTransfers = transfers?.count || 0;
+  const showLoadMoreTransactions = totalTransfers > shownTransactions && shownTransactions < 100;
 
   return (
     <div>
@@ -34,8 +48,8 @@ export default function Treasury() {
             path: '',
           },
         ]}
-        buttonText={showButton ? t('buttonSendAssets') : undefined}
-        buttonClick={useFractalModal(ModalType.SEND_ASSETS)}
+        buttonText={showSendButton ? t('buttonSendAssets') : undefined}
+        buttonClick={showSendButton ? openSendAsset : undefined}
         buttonTestId="link-send-assets"
       />
       <Flex
@@ -44,20 +58,76 @@ export default function Treasury() {
         gap="1rem"
         flexWrap="wrap"
       >
+        <Show above="lg">
+          <Box width={{ base: '100%', xl: '55%' }}>
+            <TitledInfoBox
+              width={{ base: '100%' }}
+              title={t('titleTransactions')}
+              titleTestId="title-transactions"
+              bg="neutral-2"
+            >
+              <Transactions shownTransactions={shownTransactions} />
+              {totalTransfers > 0 && (
+                <>
+                  <Divider
+                    variant="darker"
+                    my="1rem"
+                  />
+                  <Box px={{ base: '1rem', lg: '1.5rem' }}>
+                    <PaginationCount
+                      totalTransfers={totalTransfers}
+                      shownTransactions={shownTransactions}
+                      daoAddress={daoAddress}
+                    />
+                  </Box>
+                  <Divider
+                    variant="darker"
+                    my="1rem"
+                  />
+                </>
+              )}
+            </TitledInfoBox>
+            {showLoadMoreTransactions && (
+              <PaginationButton onClick={() => setShownTransactions(prevState => prevState + 20)} />
+            )}
+          </Box>
+        </Show>
         <TitledInfoBox
-          minWidth={{ sm: '100%', xl: '55%' }}
-          title={t('titleTransactions')}
-          titleTestId="title-transactions"
-        >
-          <Transactions />
-        </TitledInfoBox>
-        <TitledInfoBox
-          minWidth={{ sm: '100%', xl: '35%' }}
+          width={{ base: '100%', xl: '35%' }}
           title={t('titleAssets')}
           titleTestId="title-assets"
+          bg={{ base: 'neutral-2', lg: 'none' }}
+          overflowX={{ base: 'hidden', lg: 'scroll' }}
         >
           <Assets />
         </TitledInfoBox>
+        <Hide above="lg">
+          <Box
+            mt="2rem"
+            w="full"
+          >
+            <Text textStyle="display-lg">{t('titleTransactions')}</Text>
+            <PaginationCount
+              totalTransfers={totalTransfers}
+              shownTransactions={shownTransactions}
+              daoAddress={daoAddress}
+            />
+            <Box
+              width="full"
+              py="1rem"
+              mt="1.25rem"
+              borderRadius="0.75rem"
+              bg="neutral-3"
+              maxW={CONTENT_MAXW}
+              overflowX="scroll"
+            >
+              <Transactions shownTransactions={shownTransactions} />
+            </Box>
+            {showLoadMoreTransactions && (
+              <PaginationButton onClick={() => setShownTransactions(prevState => prevState + 20)} />
+            )}
+          </Box>
+        </Hide>
       </Flex>
     </div>
   );
diff --git a/src/providers/NetworkConfig/web3-modal.config.ts b/src/providers/NetworkConfig/web3-modal.config.ts
index d2e24b6f5b..bda5e682f9 100644
--- a/src/providers/NetworkConfig/web3-modal.config.ts
+++ b/src/providers/NetworkConfig/web3-modal.config.ts
@@ -20,7 +20,7 @@ export const queryClient = new QueryClient();
 const wagmiMetadata = {
   name: import.meta.env.VITE_APP_NAME,
   description:
-    'Are you outgrowing your Multisig? Fractal extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance.',
+    'Are you outgrowing your Multisig? Decent extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance.',
   url: import.meta.env.VITE_APP_SITE_URL,
   icons: [`${import.meta.env.VITE_APP_SITE_URL}/favicon.ico`],
 };
diff --git a/src/router.tsx b/src/router.tsx
index dd07f23944..ab72c4a104 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -7,6 +7,7 @@ import DAOController from './pages/DAOController';
 import HomePage from './pages/HomePage';
 import DaoCreatePage from './pages/create';
 import DaoDashboardPage from './pages/daos/[daoAddress]/DaoDashboardPage';
+import { SettingsPage } from './pages/daos/[daoAddress]/SettingsPage';
 import ModifyGovernancePage from './pages/daos/[daoAddress]/edit/governance';
 import HierarchyPage from './pages/daos/[daoAddress]/hierarchy';
 import SubDaoCreate from './pages/daos/[daoAddress]/new';
@@ -15,7 +16,6 @@ import CreateProposalTemplatePage from './pages/daos/[daoAddress]/proposal-templ
 import ProposalsPage from './pages/daos/[daoAddress]/proposals';
 import ProposalDetailsPage from './pages/daos/[daoAddress]/proposals/[proposalId]';
 import ProposalCreatePage from './pages/daos/[daoAddress]/proposals/new';
-import SettingsPage from './pages/daos/[daoAddress]/settings';
 import Treasury from './pages/daos/[daoAddress]/treasury';
 
 export const router = (addressPrefix: string) =>
diff --git a/src/types/createDAO.ts b/src/types/createDAO.ts
index 599d90e83a..574b422935 100644
--- a/src/types/createDAO.ts
+++ b/src/types/createDAO.ts
@@ -107,9 +107,7 @@ export interface AzoriusERC721DAO<T = bigint>
 
 export interface SafeMultisigDAO extends DAOEssentials, SafeConfiguration {}
 
-export type DAOTrigger = (
-  daoData: SafeMultisigDAO | AzoriusERC20DAO | AzoriusERC721DAO | SubDAO,
-) => void;
+export type DAOTrigger = (daoData: SafeMultisigDAO | AzoriusERC20DAO | AzoriusERC721DAO) => void;
 
 export type AddressValidationMap = Map<string, AddressValidation>;
 
diff --git a/src/types/safeGlobal.ts b/src/types/safeGlobal.ts
index 60f9ff294a..3418a61fba 100644
--- a/src/types/safeGlobal.ts
+++ b/src/types/safeGlobal.ts
@@ -40,7 +40,8 @@ export type SafeInfoResponseWithGuard = SafeInfoResponse & {
  * to see more than the first page of assets.
  */
 export interface AllTransfersListResponse {
-  next: any;
+  next: string;
+  count: number;
   results: TransferResponse[];
 }
 
diff --git a/src/utils/url.ts b/src/utils/url.ts
index 471bc43842..3d9bd6c1f6 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -18,7 +18,7 @@ export const isValidUrl = (urlString: string) => {
 export const couldBeENS = (ensAddress?: string): boolean => {
   if (!ensAddress) return false;
 
-  // everything up to the last index included, to support subdomains, e.g. blah.decent-dao.eth
+  // everything up to the last index included, to support subdomains, e.g. blah.decentdao.eth
   const name = ensAddress.substring(0, ensAddress.lastIndexOf('.')).trim();
   const tld = ensAddress.substring(ensAddress.lastIndexOf('.') + 1).trim();
 
diff --git a/tsconfig.json b/tsconfig.json
index 9bca4637de..05bea6ff9a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,6 +17,5 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "exclude": ["docker"],
   "include": ["src", "tests", "test", "app", "netlify/functions", "vite.config.mts"]
 }
diff --git a/utils/i18n/1_json_to_csv.py b/utils/i18n/1_json_to_csv.py
index 19a8fee2a2..76b053e324 100755
--- a/utils/i18n/1_json_to_csv.py
+++ b/utils/i18n/1_json_to_csv.py
@@ -59,7 +59,7 @@ def main():
 	print('There ARE missing strings!' if missingStrings else 'NO missing strings! Party!')
 
 # gets the existing json translation files for the given language as a dictionary of dictionaries
-# e.g. {'common.json': {'accept': 'Acepto'}, 'daoCreate.json': {'buttonCreate': 'Crear un Fractal'}}
+# e.g. {'common.json': {'accept': 'Acepto'}, 'daoCreate.json': {'buttonCreate': 'Crear un Decent'}}
 def getJsonData(langCode):
 	if not os.path.exists(reactPath + langCode):
 		os.makedirs(reactPath + langCode)
diff --git a/utils/i18n/2_csv_to_json.py b/utils/i18n/2_csv_to_json.py
index 15834ebbaf..b386e472ea 100755
--- a/utils/i18n/2_csv_to_json.py
+++ b/utils/i18n/2_csv_to_json.py
@@ -23,7 +23,7 @@
 chosenLang = {}
 
 # process the .csv into a dictionary of dictionaries for the chosen language
-# e.g. {'common.json': {'accept': 'Acepto'}, 'daoCreate.json': {'buttonCreate': 'Crear un Fractal'}}
+# e.g. {'common.json': {'accept': 'Acepto'}, 'daoCreate.json': {'buttonCreate': 'Crear un Decent'}}
 with open(chosenCsv, 'r') as f:
     reader = csv.reader(f)
     next(reader, None) # skip headers
diff --git a/vite.config.mts b/vite.config.mts
index 15aac04e3e..a7fbee6f80 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,12 +1,11 @@
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import { checker } from 'vite-plugin-checker';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import packageJson from './package.json';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [nodePolyfills(), react(), checker({ typescript: true })],
+  plugins: [react(), checker({ typescript: true })],
   server: {
     port: 3000,
   },