diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 4e0fa640c..614a4b2f1 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -26,8 +26,5 @@ jobs:
       - name: Build
         run: yarn run build
 
-      - name: Format
-        run: yarn run format:check
-
       - name: Lint
         run: yarn run lint
diff --git a/package.json b/package.json
index 48ba0359b..044cabcb0 100644
--- a/package.json
+++ b/package.json
@@ -1,22 +1,20 @@
 {
   "name": "snapshot",
   "version": "0.1.4",
+  "license": "MIT",
+  "repository": "snapshot-labs/snapshot",
   "scripts": {
     "dev": "vite --port=8080",
-    "preinstall": "yarn run init-submodules",
     "build": "vite build",
     "lint": "eslint \"*.{ts,js,vue,json}\" src/ --ext .ts,.js,.vue,.json",
     "lint:fix": "yarn lint --fix",
-    "format": "prettier \"**/*.{ts,js,vue,json}\"",
-    "format:check": "yarn format --check || exit 1",
-    "format:fix": "yarn format --write",
+    "preinstall": "yarn run init-submodules",
     "postinstall": "patch-package && husky install",
     "init-submodules": "git submodule update --init",
     "test:unit": "vitest run",
     "test:unit:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@adraffy/ens-normalize": "^1.10.0",
     "@apollo/client": "^3.8.7",
     "@braintree/sanitize-url": "^6.0.4",
     "@ensdomains/eth-ens-namehash": "^2.0.15",
@@ -38,8 +36,7 @@
     "@shutter-network/shutter-crypto": "1.0.1",
     "@snapshot-labs/lock": "^0.2.1",
     "@snapshot-labs/pineapple": "^1.1.0",
-    "@snapshot-labs/snapshot.js": "^0.9.2",
-    "@snapshot-labs/tune": "^0.1.34",
+    "@snapshot-labs/snapshot.js": "^0.9.5",
     "@vue/apollo-composable": "4.0.0-beta.11",
     "@vueuse/core": "^10.6.1",
     "@vueuse/head": "^2.0.0",
@@ -52,6 +49,7 @@
     "js-sha256": "^0.10.1",
     "jsonexport": "^3.2.0",
     "lodash": "^4.17.21",
+    "minisearch": "^6.2.0",
     "mixpanel-browser": "^2.48.1",
     "remarkable": "^2.0.1",
     "remove-markdown": "^0.5.0",
@@ -105,7 +103,5 @@
   "resolutions": {
     "ansi-regex": "^5.0.1",
     "axios": "^0.21.1"
-  },
-  "license": "MIT",
-  "repository": "snapshot-labs/snapshot"
+  }
 }
diff --git a/src/style.scss b/src/assets/css/main.scss
similarity index 60%
rename from src/style.scss
rename to src/assets/css/main.scss
index 8f3485827..a51a013b3 100644
--- a/src/style.scss
+++ b/src/assets/css/main.scss
@@ -1,4 +1,7 @@
-@import './assets/fonts/iconfont.css';
+@import '../fonts/iconfont.css';
+@import 'viewerjs/dist/viewer.css';
+@import './tippy.scss';
+@import './tune.scss';
 
 @tailwind base;
 @tailwind components;
@@ -33,21 +36,21 @@
 @layer base {
   @font-face {
     font-family: 'Calibre';
-    src: url('./assets/fonts/Calibre-Medium-Custom.woff2') format('woff2');
+    src: url('../fonts/Calibre-Medium-Custom.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
   }
 
   @font-face {
     font-family: 'Calibre';
-    src: url('./assets/fonts/Calibre-Semibold-Custom.woff2') format('woff2');
+    src: url('../fonts/Calibre-Semibold-Custom.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
   }
 
   @font-face {
     font-family: 'SpaceMono';
-    src: url('./assets/fonts/space-mono-v11-latin-700.woff2') format('woff2');
+    src: url('../fonts/space-mono-v11-latin-700.woff2') format('woff2');
   }
 
   html {
@@ -115,44 +118,6 @@
   }
 }
 
-// Tune component styles
-
-.tune-label {
-  @apply font-sans;
-}
-
-.tune-sublabel {
-  @apply font-sans;
-}
-
-.tune-button {
-  @apply rounded-full;
-}
-
-.tune-input {
-  @apply rounded-full;
-}
-
-.tune-textarea {
-  @apply rounded-3xl px-3;
-}
-
-.tune-listbox-button {
-  @apply rounded-full;
-}
-
-.tune-button-select {
-  @apply rounded-full;
-}
-
-.tune-input-duration {
-  @apply rounded-full;
-}
-
-.tune-error-text {
-  @apply font-sans;
-}
-
 // Fade transition for Vue's transition and transition-group
 .fade-enter-active,
 .fade-leave-active {
@@ -219,94 +184,6 @@ input[type='number'] {
   -moz-appearance: textfield;
 }
 
-// V-Tippy tooltip package styling - could be moved somewhere else?
-.tippy-box[data-animation='fade'][data-state='hidden'] {
-  opacity: 0;
-}
-[data-tippy-root] {
-  max-width: calc(100vw - 10px);
-}
-.tippy-box {
-  position: relative;
-  background-color: var(--text-color);
-  color: var(--header-bg);
-  border-radius: 7px;
-  font-size: 16px;
-  line-height: 1.4;
-  outline: 0;
-  transition-property: transform, visibility, opacity;
-  padding: 2px 4px;
-  text-align: center;
-  font-weight: 500;
-}
-.tippy-box[data-placement^='top'] > .tippy-arrow {
-  bottom: 0;
-}
-.tippy-box[data-placement^='top'] > .tippy-arrow:before {
-  bottom: -7px;
-  left: 0;
-  border-width: 8px 8px 0;
-  border-top-color: var(--text-color);
-  transform-origin: center top;
-}
-.tippy-box[data-placement^='bottom'] > .tippy-arrow {
-  top: 0;
-}
-.tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
-  top: -7px;
-  left: 0;
-  border-width: 0 8px 8px;
-  border-bottom-color: var(--text-color);
-  transform-origin: center bottom;
-}
-.tippy-box[data-placement^='left'] > .tippy-arrow {
-  right: 0;
-}
-.tippy-box[data-placement^='left'] > .tippy-arrow:before {
-  border-width: 8px 0 8px 8px;
-  border-left-color: var(--text-color);
-  right: -7px;
-  transform-origin: center left;
-}
-.tippy-box[data-placement^='right'] > .tippy-arrow {
-  left: 0;
-}
-.tippy-box[data-placement^='right'] > .tippy-arrow:before {
-  left: -7px;
-  border-width: 8px 8px 8px 0;
-  border-right-color: var(--text-color);
-  transform-origin: center right;
-}
-.tippy-box[data-inertia][data-state='visible'] {
-  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-}
-.tippy-arrow {
-  width: 16px;
-  height: 16px;
-  color: #333;
-}
-.tippy-arrow:before {
-  content: '';
-  position: absolute;
-  border-color: transparent;
-  border-style: solid;
-}
-.tippy-content {
-  position: relative;
-  padding: 5px 9px;
-  z-index: 1;
-  overflow-wrap: break-word;
-}
-.tippy-box[data-theme~='urlified'] {
-  max-width: 200px;
-  white-space: pre-wrap;
-  color: var(--header-bg);
-
-  a {
-    color: var(--header-bg);
-  }
-}
-
 .lazy-loading {
   @apply animate-pulse-fast bg-skin-border;
 }
diff --git a/src/assets/css/tippy.scss b/src/assets/css/tippy.scss
new file mode 100644
index 000000000..0455b0265
--- /dev/null
+++ b/src/assets/css/tippy.scss
@@ -0,0 +1,87 @@
+// V-Tippy tooltip package styling - could be moved somewhere else?
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}
+[data-tippy-root] {
+  max-width: calc(100vw - 10px);
+}
+.tippy-box {
+  position: relative;
+  background-color: var(--text-color);
+  color: var(--header-bg);
+  border-radius: 7px;
+  font-size: 16px;
+  line-height: 1.4;
+  outline: 0;
+  transition-property: transform, visibility, opacity;
+  padding: 2px 4px;
+  text-align: center;
+  font-weight: 500;
+}
+.tippy-box[data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+.tippy-box[data-placement^='top'] > .tippy-arrow:before {
+  bottom: -7px;
+  left: 0;
+  border-width: 8px 8px 0;
+  border-top-color: var(--text-color);
+  transform-origin: center top;
+}
+.tippy-box[data-placement^='bottom'] > .tippy-arrow {
+  top: 0;
+}
+.tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
+  top: -7px;
+  left: 0;
+  border-width: 0 8px 8px;
+  border-bottom-color: var(--text-color);
+  transform-origin: center bottom;
+}
+.tippy-box[data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+.tippy-box[data-placement^='left'] > .tippy-arrow:before {
+  border-width: 8px 0 8px 8px;
+  border-left-color: var(--text-color);
+  right: -7px;
+  transform-origin: center left;
+}
+.tippy-box[data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+.tippy-box[data-placement^='right'] > .tippy-arrow:before {
+  left: -7px;
+  border-width: 8px 8px 8px 0;
+  border-right-color: var(--text-color);
+  transform-origin: center right;
+}
+.tippy-box[data-inertia][data-state='visible'] {
+  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+}
+.tippy-arrow {
+  width: 16px;
+  height: 16px;
+  color: #333;
+}
+.tippy-arrow:before {
+  content: '';
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+.tippy-content {
+  position: relative;
+  padding: 5px 9px;
+  z-index: 1;
+  overflow-wrap: break-word;
+}
+.tippy-box[data-theme~='urlified'] {
+  max-width: 200px;
+  white-space: pre-wrap;
+  color: var(--header-bg);
+
+  a {
+    color: var(--header-bg);
+  }
+}
diff --git a/src/assets/css/tune.scss b/src/assets/css/tune.scss
new file mode 100644
index 000000000..fd6ccbc99
--- /dev/null
+++ b/src/assets/css/tune.scss
@@ -0,0 +1,181 @@
+.tune-input {
+  @apply form-input rounded-full border-skin-border bg-transparent text-base text-skin-link focus:border-skin-text focus:outline-none focus:ring-0;
+}
+
+.tune-textarea {
+  @extend .tune-input;
+  @apply no-scrollbar rounded-3xl px-3;
+
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+}
+
+.tune-textarea-json {
+  @apply no-scrollbar overflow-x-scroll whitespace-pre;
+
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+}
+
+.tune-switch {
+  @apply border-transparent;
+
+  &.switched-on-bg {
+    @apply bg-green;
+  }
+  &.switched-off-bg {
+    @apply bg-skin-border;
+  }
+
+  &.switched-on-text {
+    @apply text-green;
+  }
+  &.switched-off-text {
+    @apply text-skin-text;
+  }
+}
+
+.tune-switch-button {
+  @apply bg-skin-bg;
+}
+
+.tune-input-loading {
+  @apply rounded-r-full bg-skin-bg;
+}
+
+.tune-button {
+  @apply flex h-[42px] cursor-pointer justify-center rounded-full border border-skin-border px-3 py-2 hover:border-skin-text disabled:cursor-not-allowed;
+
+  &.primary {
+    @apply border-skin-primary bg-skin-primary text-white;
+  }
+
+  &.disabled {
+    @apply border-skin-border bg-skin-bg text-skin-border;
+  }
+}
+
+.tune-button-select {
+  @apply relative flex w-full justify-start truncate pl-3 pr-5 text-left text-base text-skin-link rounded-full;
+
+  &.disabled {
+    @apply cursor-not-allowed border-skin-border;
+  }
+}
+
+.tune-input-duration {
+  @apply rounded-full border border-skin-border px-3 text-base text-skin-link focus-within:border-skin-text;
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+}
+
+.tune-input-duration-label {
+  @apply text-skin-text;
+}
+
+.tune-select {
+  @apply text-left;
+
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+}
+
+.tune-listbox-button {
+  @apply rounded-full border border-skin-border text-base text-skin-link hover:border-skin-text;
+
+  &.disabled {
+    @apply hover:border-skin-border;
+  }
+
+  &.error {
+    @apply border-red;
+  }
+}
+
+.tune-listbox-options {
+  @apply rounded-md border border-skin-border bg-skin-bg shadow-lg;
+}
+
+.tune-listbox-item {
+  &.selected {
+    @apply text-skin-link;
+  }
+  &.disabled {
+    @apply text-skin-border;
+  }
+  &.active {
+    @apply bg-skin-border;
+  }
+}
+
+.tune-listbox-placeholder {
+  @apply text-skin-text opacity-60;
+}
+
+.tune-label {
+  @apply font-sans text-skin-text;
+}
+
+.tune-sublabel {
+  @apply font-sans text-sm text-skin-text opacity-60;
+}
+
+.tune-icon-hint {
+  @apply text-sm hover:text-skin-link;
+}
+
+.tune-error-text {
+  @apply font-sans text-sm text-red;
+}
+
+.tune-error-border {
+  @apply border-red;
+}
+
+.tune-tag {
+  @apply rounded-md border border-skin-border bg-skin-border px-2 py-1 text-sm text-skin-text;
+}
+
+.tune-menu-list {
+  @apply rounded-md border border-skin-border bg-skin-header-bg shadow-lg;
+}
+
+.tune-menu-list-item {
+  @apply bg-skin-header-bg text-skin-text;
+
+  &.active {
+    @apply bg-skin-border text-skin-link;
+  }
+}
+
+.tune-popover {
+  @apply rounded-md border bg-skin-header-bg shadow-lg;
+}
+
+.tune-modal-panel {
+  @apply rounded-md border border-skin-border bg-skin-bg p-4 sm:w-[440px];
+}
+
+.tune-modal-backdrop {
+  @apply bg-skin-border opacity-70;
+}
+
+.tune-modal-title {
+  @apply text-center text-lg font-medium text-skin-text;
+}
+
+.tune-input-checkbox {
+  @apply form-checkbox h-[20px] w-[20px] rounded-lg border-skin-text bg-skin-bg text-skin-primary focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-1 focus-visible:ring-offset-skin-text;
+}
+
+.tune-input-radio {
+  @apply form-radio h-[20px] w-[20px] rounded-full border-skin-text bg-skin-bg text-skin-primary focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-1 focus-visible:ring-offset-skin-text;
+}
+
+.tune-form-array-objects {
+  @apply rounded-xl border p-3;
+}
diff --git a/src/assets/icons/spinner.svg b/src/assets/icons/spinner.svg
new file mode 100644
index 000000000..ccb5e4da3
--- /dev/null
+++ b/src/assets/icons/spinner.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3a9 9 0 1 0 9 9"/></svg>
\ No newline at end of file
diff --git a/src/components/BaseCalendar.vue b/src/components/BaseCalendar.vue
index cf5536517..ef182ca01 100644
--- a/src/components/BaseCalendar.vue
+++ b/src/components/BaseCalendar.vue
@@ -102,7 +102,7 @@ function isSelectable(year, month, day) {
           v-if="isSelectable(year, month, day)"
           class="day border-b border-r bg-transparent text-skin-link hover:bg-skin-link hover:text-skin-bg"
           :class="{
-            'ring-1 ring-inset ring-primary':
+            'ring-1 ring-inset ring-skin-primary':
               formatDate(year, month, day) === today,
             '!bg-skin-link !text-skin-bg': input.includes(
               formatDate(year, month, day)
diff --git a/src/components/BaseIndicator.vue b/src/components/BaseIndicator.vue
index fddf5171f..d5362a05f 100644
--- a/src/components/BaseIndicator.vue
+++ b/src/components/BaseIndicator.vue
@@ -1,3 +1,3 @@
 <template>
-  <span class="inline-block h-[12px] w-[12px] rounded-full bg-primary" />
+  <span class="inline-block h-[12px] w-[12px] rounded-full bg-skin-primary" />
 </template>
diff --git a/src/components/BaseProgressBar.vue b/src/components/BaseProgressBar.vue
index a6d9ec357..afdb0477b 100644
--- a/src/components/BaseProgressBar.vue
+++ b/src/components/BaseProgressBar.vue
@@ -7,7 +7,7 @@ defineProps<{ value: number }>();
     <div class="z-5 absolute h-full w-full bg-[color:var(--border-color)]" />
     <div
       :style="`width: ${value.toFixed(3)}%;`"
-      class="z-10 h-full bg-primary opacity-80"
+      class="z-10 h-full bg-skin-primary opacity-80"
     />
   </div>
 </template>
diff --git a/src/components/BlockSpacesListItem.vue b/src/components/BlockSpacesListItem.vue
index f0050a8d4..3ae114b4b 100644
--- a/src/components/BlockSpacesListItem.vue
+++ b/src/components/BlockSpacesListItem.vue
@@ -27,7 +27,7 @@ defineProps<{
       <IconVerifiedSpace
         v-if="space.verified"
         size="14"
-        class="pl-1 text-primary"
+        class="pl-1 text-skin-primary"
       />
     </div>
   </router-link>
diff --git a/src/components/ComboboxNetwork.vue b/src/components/ComboboxNetwork.vue
index f667a9477..bbbc807e8 100644
--- a/src/components/ComboboxNetwork.vue
+++ b/src/components/ComboboxNetwork.vue
@@ -3,16 +3,22 @@ defineProps<{
   network: string;
   hint?: string;
   disabled?: boolean;
+  error?: string;
+  showErrors?: boolean;
 }>();
 
 const emit = defineEmits(['select']);
 
 const { filterNetworks } = useNetworksFilter();
+const { env } = useApp();
 
 const networks = computed((): { id: string; name: string }[] => {
   const filteredNetworks = filterNetworks().map(_n => ({
     id: _n.key,
-    name: _n.name
+    name: _n.name,
+    extras: {
+      hidden: env === 'production' ? _n.testnet : false
+    }
   }));
 
   return filteredNetworks;
@@ -26,6 +32,8 @@ const networks = computed((): { id: string; name: string }[] => {
     :model-value="network"
     :hint="hint"
     :disabled="disabled"
+    :error="error"
+    :show-errors="showErrors"
     @update:model-value="value => emit('select', value)"
   >
     <template #item="{ item }">
diff --git a/src/components/InputCheckbox.vue b/src/components/InputCheckbox.vue
index 9a98fe2e8..4719c832d 100644
--- a/src/components/InputCheckbox.vue
+++ b/src/components/InputCheckbox.vue
@@ -14,7 +14,7 @@ const emit = defineEmits(['update:modelValue']);
       :checked="modelValue"
       :name="name"
       type="checkbox"
-      class="form-checkbox h-[19px] w-[19px] rounded-lg border-skin-text bg-skin-bg text-primary !outline-none !ring-0"
+      class="form-checkbox h-[19px] w-[19px] rounded-lg border-skin-text bg-skin-bg text-skin-primary !outline-none !ring-0"
       @input="
         emit('update:modelValue', ($event.target as HTMLInputElement).checked)
       "
diff --git a/src/components/MessageWarningTestnet.vue b/src/components/MessageWarningTestnet.vue
new file mode 100644
index 000000000..7c6d7f12f
--- /dev/null
+++ b/src/components/MessageWarningTestnet.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{
+  context: 'Treasury' | 'Strategy';
+  error?: string | Record<string, any>;
+}>();
+
+const strategyTestnetErrors = computed(() => {
+  if (typeof props.error === 'object') {
+    const entries = Object.entries(props.error).filter(e => e[1].network);
+    return entries.filter(e => e[1].network === 'Testnet not allowed.');
+  }
+});
+</script>
+
+<template>
+  <BaseMessageBlock
+    v-if="strategyTestnetErrors"
+    level="warning-red"
+    class="mt-3"
+  >
+    {{ context }}
+    #{{ strategyTestnetErrors.map(e => Number(e[0]) + 1).join(', ') }}
+    is using a test network which is no longer supported. If you are looking to
+    setup a space for testing, please checkout
+    <BaseLink link="https://demo.snapshot.org"> demo.snapshot.org</BaseLink>
+  </BaseMessageBlock>
+</template>
diff --git a/src/components/ModalSpacesListItem.vue b/src/components/ModalSpacesListItem.vue
index a1da229c0..71c93a00a 100644
--- a/src/components/ModalSpacesListItem.vue
+++ b/src/components/ModalSpacesListItem.vue
@@ -21,7 +21,7 @@ defineProps<{
               </div>
               <IconVerifiedSpace
                 v-if="space.verified"
-                class="ml-1 flex text-primary"
+                class="ml-1 flex text-skin-primary"
                 size="18"
               />
             </div>
diff --git a/src/components/ProfileAboutDelegateListItem.vue b/src/components/ProfileAboutDelegateListItem.vue
index 71917c1d3..d54b61830 100644
--- a/src/components/ProfileAboutDelegateListItem.vue
+++ b/src/components/ProfileAboutDelegateListItem.vue
@@ -31,7 +31,7 @@ defineEmits(['delegate']);
             <IconVerifiedSpace
               v-if="space.verified"
               size="19"
-              class="ml-1 flex text-primary"
+              class="ml-1 flex text-skin-primary"
             />
           </div>
         </router-link>
diff --git a/src/components/ProfileActivityListItem.vue b/src/components/ProfileActivityListItem.vue
index a9c17512c..24010c1df 100644
--- a/src/components/ProfileActivityListItem.vue
+++ b/src/components/ProfileActivityListItem.vue
@@ -20,7 +20,7 @@ defineProps<{ activity: ProfileActivity }>();
         <div class="relative min-w-[52px]">
           <AvatarSpace size="44" :space="activity.space" />
           <div
-            class="absolute right-0 top-[24px] rounded-full bg-primary p-[6px] pr-[5px] text-[9px] text-white"
+            class="absolute right-0 top-[24px] rounded-full bg-skin-primary p-[6px] pr-[5px] text-[9px] text-white"
           >
             <i-s-signature />
           </div>
diff --git a/src/components/SettingsStrategiesBlock.vue b/src/components/SettingsStrategiesBlock.vue
index 106ed38da..f59e0987e 100644
--- a/src/components/SettingsStrategiesBlock.vue
+++ b/src/components/SettingsStrategiesBlock.vue
@@ -62,6 +62,8 @@ function handleSubmitStrategy(strategy) {
           :network="form.network"
           :hint="$t('settings.network.information')"
           :disabled="isViewOnly"
+          :error="validationErrors?.network"
+          :show-errors="showErrors"
           @select="value => (form.network = value)"
         />
         <TuneInput
diff --git a/src/components/SettingsTreasuriesBlock.vue b/src/components/SettingsTreasuriesBlock.vue
index f4fa9f00e..e7440f947 100644
--- a/src/components/SettingsTreasuriesBlock.vue
+++ b/src/components/SettingsTreasuriesBlock.vue
@@ -5,6 +5,7 @@ import { clone } from '@snapshot-labs/snapshot.js/src/utils';
 const props = defineProps<{
   context: 'setup' | 'settings';
   space: ExtendedSpace;
+  error: string | Record<string, any>;
   isViewOnly?: boolean;
 }>();
 
@@ -101,6 +102,9 @@ function handleCloseConfigureOsnapModal() {
     >
       {{ $t('settings.treasuries.add') }}
     </BaseButton>
+
+    <MessageWarningTestnet context="Treasury" :error="error" />
+
     <teleport to="#modal">
       <ModalTreasury
         :open="modalTreasuryOpen"
diff --git a/src/components/SetupExtras.vue b/src/components/SetupExtras.vue
index 9301c428f..cef26d953 100644
--- a/src/components/SetupExtras.vue
+++ b/src/components/SetupExtras.vue
@@ -24,8 +24,6 @@ function handleSubmit() {
 
     <SettingsVotingBlock context="setup" />
 
-    <SettingsValidationBlock context="setup" />
-
     <SettingsDomainBlock context="setup" />
 
     <SettingsSubSpacesBlock context="setup" />
@@ -33,6 +31,8 @@ function handleSubmit() {
     <SettingsTreasuriesBlock context="setup" />
 
     <SettingsPluginsBlock context="setup" />
+
+    <SettingsValidationBlock context="setup" :show-errors="showErrors" />
   </div>
   <div v-else class="space-y-4">
     <h4 class="-mb-2 px-4 md:px-0">
diff --git a/src/components/SetupSidebarStepper.vue b/src/components/SetupSidebarStepper.vue
index 44d79a2aa..63eaeb8ba 100644
--- a/src/components/SetupSidebarStepper.vue
+++ b/src/components/SetupSidebarStepper.vue
@@ -24,12 +24,12 @@ const steps = [
           <div v-if="currentStep > i">
             <span class="flex items-center">
               <span
-                class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-primary"
+                class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-skin-primary"
               >
                 <i-ho-check class="text-[14px] text-white" aria-hidden="true" />
                 <span
                   v-if="i > 0"
-                  class="absolute -top-4 h-4 w-[1px] bg-primary"
+                  class="absolute -top-4 h-4 w-[1px] bg-skin-primary"
                 />
               </span>
 
@@ -47,14 +47,16 @@ const steps = [
             aria-current="step"
           >
             <span
-              class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border !border-primary"
+              class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border !border-skin-primary"
               aria-hidden="true"
             >
               <span class="absolute h-4 w-4 rounded-full" />
-              <span class="relative block h-2 w-2 rounded-full bg-primary" />
+              <span
+                class="relative block h-2 w-2 rounded-full bg-skin-primary"
+              />
               <span
                 v-if="i > 0"
-                class="absolute -top-[25px] h-4 w-[1px] bg-primary"
+                class="absolute -top-[25px] h-4 w-[1px] bg-skin-primary"
               />
             </span>
             <span class="ml-3 text-base font-medium text-skin-link">
diff --git a/src/components/SpaceProposalResultsProgressBar.vue b/src/components/SpaceProposalResultsProgressBar.vue
index 36d05da22..0a6e853a7 100644
--- a/src/components/SpaceProposalResultsProgressBar.vue
+++ b/src/components/SpaceProposalResultsProgressBar.vue
@@ -13,7 +13,7 @@ const bars = computed(() =>
       v-for="(bar, i) in bars.filter(b => b !== 0)"
       :key="i"
       :style="`width: ${((100 / max) * bar).toFixed(3)}%;`"
-      class="z-10 h-full bg-primary"
+      class="z-10 h-full bg-skin-primary"
       :class="{
         'opacity-80': i === 1,
         'opacity-60': i === 2,
diff --git a/src/components/StrategiesBlockWarning.vue b/src/components/StrategiesBlockWarning.vue
index 1ba2ec1f8..8312033c8 100644
--- a/src/components/StrategiesBlockWarning.vue
+++ b/src/components/StrategiesBlockWarning.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   context?: 'setup' | 'settings';
-  error?: string;
+  error?: string | Record<string, any>;
 }>();
+
+const strategyTestnetErrors = computed(() => {
+  if (typeof props.error === 'object') {
+    const entries = Object.entries(props.error).filter(e => e[1].network);
+    return entries.filter(e => e[1].network === 'Testnet not allowed.');
+  }
+});
 </script>
 
 <template>
-  <BaseMessageBlock v-if="error" level="warning-red" class="mt-3">
-    <span v-if="error === 'ticketWithAnyOrBasicError'">
+  <div v-if="error" class="mt-3">
+    <BaseMessageBlock
+      v-if="error === 'ticketWithAnyOrBasicError'"
+      level="warning-red"
+    >
       <i18n-t
         :keypath="
           context === 'setup'
@@ -25,10 +35,15 @@ defineProps<{
           </BaseLink>
         </template>
       </i18n-t>
-    </span>
+    </BaseMessageBlock>
+    <MessageWarningTestnet
+      v-else-if="strategyTestnetErrors"
+      context="Strategy"
+      :error="error"
+    />
 
-    <span v-else>
+    <BaseMessageBlock v-else level="warning-red">
       {{ error }}
-    </span>
-  </BaseMessageBlock>
+    </BaseMessageBlock>
+  </div>
 </template>
diff --git a/src/components/TheNavbar.vue b/src/components/TheNavbar.vue
index ab7877a35..daa3e6ee7 100644
--- a/src/components/TheNavbar.vue
+++ b/src/components/TheNavbar.vue
@@ -17,7 +17,7 @@ watch(
 <template>
   <div
     v-if="env === 'demo' && showDemoBanner"
-    class="relative bg-primary p-3 text-center"
+    class="relative bg-skin-primary p-3 text-center"
     style="color: white; font-size: 20px"
   >
     {{ $t('demoSite') }}
@@ -58,7 +58,7 @@ watch(
   </div>
   <div
     v-if="pendingTransactions.length > 0"
-    class="flex flex-row items-center justify-center gap-x-3 bg-primary py-2 text-center text-white"
+    class="flex flex-row items-center justify-center gap-x-3 bg-skin-primary py-2 text-center text-white"
     :class="{
       'cursor-pointer': pendingTransactions.length > 0
     }"
diff --git a/src/components/Tune/TuneButton.story.vue b/src/components/Tune/TuneButton.story.vue
new file mode 100644
index 000000000..14a8de780
--- /dev/null
+++ b/src/components/Tune/TuneButton.story.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story> <TuneButton> Confirm </TuneButton> </Story>
+</template>
diff --git a/src/components/Tune/TuneButton.vue b/src/components/Tune/TuneButton.vue
new file mode 100644
index 000000000..2de47bd6c
--- /dev/null
+++ b/src/components/Tune/TuneButton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    type?: 'button' | 'submit' | 'reset';
+    primary?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    type: 'button',
+    primary: false,
+    loading: false,
+    disabled: false
+  }
+);
+</script>
+
+<template>
+  <button
+    :type="type"
+    :class="[
+      'tune-button',
+      {
+        primary: primary,
+        disabled: disabled
+      }
+    ]"
+    :disabled="disabled || loading"
+  >
+    <TuneLoadingSpinner v-if="loading" />
+
+    <slot v-else />
+  </button>
+</template>
diff --git a/src/components/Tune/TuneButtonSelect.story.vue b/src/components/Tune/TuneButtonSelect.story.vue
new file mode 100644
index 000000000..f325e7130
--- /dev/null
+++ b/src/components/Tune/TuneButtonSelect.story.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story> <TuneButtonSelect model-value="Confirm" /> </Story>
+</template>
diff --git a/src/components/Tune/TuneButtonSelect.vue b/src/components/Tune/TuneButtonSelect.vue
new file mode 100644
index 000000000..9631d2931
--- /dev/null
+++ b/src/components/Tune/TuneButtonSelect.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string;
+  label?: string;
+  hint?: string;
+  disabled?: boolean;
+  tooltip?: string | null;
+  definition?: any;
+}>();
+
+const emit = defineEmits(['select']);
+</script>
+
+<template>
+  <div class="w-full">
+    <TuneLabelInput
+      v-if="label || definition?.title"
+      :hint="hint || definition?.description"
+    >
+      {{ label || definition.title }}
+    </TuneLabelInput>
+    <TuneButton
+      v-tippy="{ content: tooltip }"
+      :class="[$attrs.class, { disabled: disabled }]"
+      class="tune-button-select"
+      :disabled="disabled"
+      @click="disabled ? null : emit('select')"
+    >
+      <span>
+        {{ modelValue }}
+      </span>
+      <i-ho-chevron-down class="absolute inset-y-[12px] right-[14px] text-xs" />
+    </TuneButton>
+  </div>
+</template>
diff --git a/src/components/Tune/TuneCheckbox.story.vue b/src/components/Tune/TuneCheckbox.story.vue
new file mode 100644
index 000000000..ffe968ac4
--- /dev/null
+++ b/src/components/Tune/TuneCheckbox.story.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const input = ref(false);
+</script>
+
+<template>
+  <Story>
+    <TuneCheckbox
+      id="1"
+      v-model="input"
+      label="Switch me"
+      hint="I'm a checkbox"
+      class="m-1"
+    />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneCheckbox.vue b/src/components/Tune/TuneCheckbox.vue
new file mode 100644
index 000000000..96b18af19
--- /dev/null
+++ b/src/components/Tune/TuneCheckbox.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean;
+  id: string;
+  label?: string;
+  hint?: string;
+  definition?: any;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <div>
+    <label :for="id">
+      <div class="flex items-center gap-[10px]">
+        <input
+          :id="id"
+          :checked="modelValue"
+          :name="label || definition?.title"
+          type="checkbox"
+          class="tune-input-checkbox"
+          @input="
+            emit(
+              'update:modelValue',
+              ($event.target as HTMLInputElement).checked
+            )
+          "
+        />
+        <TuneLabelInput v-if="hint || definition?.description" class="!mb-0">
+          {{ hint || definition.description }}
+        </TuneLabelInput>
+      </div>
+    </label>
+  </div>
+</template>
diff --git a/src/components/Tune/TuneCombobox.story.vue b/src/components/Tune/TuneCombobox.story.vue
new file mode 100644
index 000000000..9ebd64e0c
--- /dev/null
+++ b/src/components/Tune/TuneCombobox.story.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const items = [
+  { name: 'One', id: '1' },
+  { name: 'Two', id: '2' },
+  { name: 'Three', id: '3' },
+  { name: 'Four', id: '4' },
+  { name: 'Five', id: '5' },
+  { name: 'Six', id: '6' }
+];
+
+const input = ref('1');
+</script>
+
+<template>
+  <Story>
+    <TuneCombobox v-model="input" :items="items" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneCombobox.vue b/src/components/Tune/TuneCombobox.vue
new file mode 100644
index 000000000..c869379a3
--- /dev/null
+++ b/src/components/Tune/TuneCombobox.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+  ComboboxLabel,
+  ComboboxButton
+} from '@headlessui/vue';
+import MiniSearch from 'minisearch';
+
+type ComboboxItem = {
+  id: string;
+  name: string;
+  extras?: Record<string, any>;
+};
+
+const props = defineProps<{
+  modelValue: string;
+  items: ComboboxItem[];
+  label?: string;
+  hint?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  definition?: any;
+  error?: string;
+  showErrors?: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+let miniSearch = new MiniSearch({
+  fields: ['id', 'name'],
+  storeFields: ['id'],
+  searchOptions: {
+    boost: { name: 2 },
+    fuzzy: 0.6
+  }
+});
+
+miniSearch.addAll(props.items);
+
+const searchInput = ref('');
+const selectedItem = computed({
+  get: () => props.items.find(item => item.id === props.modelValue) || null,
+  set: newVal =>
+    newVal
+      ? emit('update:modelValue', newVal.id)
+      : emit('update:modelValue', '')
+});
+
+const filteredItems = computed(() => {
+  if (searchInput.value === '') {
+    return props.items.filter(item => !item.extras?.hidden);
+  }
+
+  const searchLower = searchInput.value.toLowerCase();
+  const searchResults = new Set(miniSearch.search(searchLower).map(i => i.id));
+
+  return props.items.filter(item => {
+    const isIncluded = item.name.toLowerCase().includes(searchLower);
+    const isSearchResult = searchResults.has(item.id);
+    const isNotHidden = !item.extras?.hidden;
+
+    return (isIncluded || isSearchResult) && isNotHidden;
+  });
+});
+</script>
+<template>
+  <div class="w-full">
+    <Combobox
+      v-model="selectedItem"
+      :disabled="disabled"
+      as="div"
+      class="w-full"
+      nullable
+    >
+      <ComboboxLabel v-if="label || definition?.title" class="block">
+        <TuneLabelInput :hint="hint || definition?.description">
+          {{ label || definition.title }}
+        </TuneLabelInput>
+      </ComboboxLabel>
+      <div class="relative">
+        <ComboboxButton class="w-full">
+          <ComboboxInput
+            class="tune-input w-full py-2 !pr-[30px] pl-3 focus:outline-none"
+            spellcheck="false"
+            :display-value="(item: any) => item?.name"
+            :class="{ 'cursor-not-allowed': disabled }"
+            :placeholder="
+              placeholder || definition?.examples[0] || 'Select option'
+            "
+            :disabled="disabled"
+            @change="searchInput = $event.target.value"
+          />
+        </ComboboxButton>
+        <ComboboxButton
+          class="absolute inset-y-0 right-1 flex items-center px-2 focus:outline-none"
+          :class="{ 'cursor-not-allowed': disabled }"
+        >
+          <i-ho-chevron-down class="text-sm" />
+        </ComboboxButton>
+        <ComboboxOptions
+          v-if="filteredItems.length > 0"
+          class="tune-listbox-options absolute z-40 mt-1 w-full overflow-hidden focus:outline-none"
+        >
+          <div class="max-h-[180px] overflow-y-auto">
+            <ComboboxOption
+              v-for="item in filteredItems"
+              v-slot="{ active, selected, disabled: itemDisabled }"
+              :key="item.id"
+              as="template"
+              :value="item"
+            >
+              <li
+                :class="[
+                  { active: active },
+                  'tune-listbox-item relative cursor-default select-none truncate py-2 pl-3 pr-[50px]'
+                ]"
+              >
+                <span
+                  :class="[
+                    selected ? 'selected' : 'font-normal',
+                    { disabled: itemDisabled },
+                    'tune-listbox-item block truncate'
+                  ]"
+                >
+                  <slot v-if="$slots.item" name="item" :item="item" />
+                  <span v-else>
+                    {{ item.name }}
+                  </span>
+                </span>
+
+                <span
+                  v-if="selected"
+                  :class="['absolute inset-y-0 right-0 flex items-center pr-3']"
+                >
+                  <i-ho-check class="text-sm" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </div>
+        </ComboboxOptions>
+      </div>
+    </Combobox>
+    <TuneErrorInput v-if="error && showErrors" :error="error" />
+  </div>
+</template>
diff --git a/src/components/Tune/TuneComboboxMultiple.story.vue b/src/components/Tune/TuneComboboxMultiple.story.vue
new file mode 100644
index 000000000..e56e5192e
--- /dev/null
+++ b/src/components/Tune/TuneComboboxMultiple.story.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const items = [
+  { name: 'One', id: '1' },
+  { name: 'Two', id: '2' },
+  { name: 'ThreeThreeThreeThreeThreeThree', id: '3' },
+  { name: 'FourFourFourFourFourFourFourFour', id: '4' },
+  { name: 'FiveFiveFiveFiveFiveFiveFiveFive', id: '5' },
+  { name: 'Six', id: '6' }
+];
+
+const input = ref(['1']);
+</script>
+
+<template>
+  <Story>
+    <TuneComboboxMultiple v-model="input" :items="items" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneComboboxMultiple.vue b/src/components/Tune/TuneComboboxMultiple.vue
new file mode 100644
index 000000000..349b87c68
--- /dev/null
+++ b/src/components/Tune/TuneComboboxMultiple.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+  ComboboxLabel,
+  ComboboxButton
+} from '@headlessui/vue';
+import MiniSearch from 'minisearch';
+
+type ComboboxItem = {
+  id: string;
+  name: string;
+  extras?: Record<string, any>;
+};
+
+const props = defineProps<{
+  modelValue: string[];
+  items: ComboboxItem[];
+  label?: string;
+  hint?: string;
+  disabled?: boolean;
+  definition?: any;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+let miniSearch = new MiniSearch({
+  fields: ['id', 'name'],
+  storeFields: ['id'],
+  searchOptions: {
+    boost: { name: 2 },
+    fuzzy: 0.4
+  }
+});
+
+miniSearch.addAll(props.items);
+
+const searchInput = ref('');
+const selectedItems = computed({
+  get: () => props.items.filter(item => props.modelValue.includes(item.id)),
+  set: newVal =>
+    emit(
+      'update:modelValue',
+      newVal.map((item: any) => item.id)
+    )
+});
+
+const filteredItems = computed(() => {
+  if (searchInput.value === '') {
+    return props.items;
+  }
+
+  const miniSearchIds = miniSearch.search(searchInput.value).map(i => i.id);
+
+  const includesIds = props.items
+    ?.filter(i =>
+      i.name.toLowerCase().includes(searchInput.value.toLowerCase())
+    )
+    .map(i => i.id);
+
+  const filterIds = [...miniSearchIds, ...includesIds];
+
+  const filteredItems = props.items.filter(item => {
+    return filterIds.includes(item.id);
+  });
+
+  return filteredItems;
+});
+</script>
+<template>
+  <Combobox
+    v-model="selectedItems"
+    multiple
+    :disabled="disabled"
+    as="div"
+    class="w-full"
+  >
+    <ComboboxLabel v-if="label || definition?.title" class="block">
+      <TuneLabelInput :hint="hint || definition?.description">
+        {{ label || definition.title }}
+      </TuneLabelInput>
+    </ComboboxLabel>
+    <div class="relative">
+      <ComboboxButton class="tune-listbox-button w-full">
+        <div class="no-scrollbar flex items-center overflow-x-auto">
+          <div v-if="selectedItems.length" class="whitespace-nowrap py-2 pl-2">
+            <span
+              v-for="item in selectedItems"
+              :key="item.id"
+              class="mr-1 inline-block"
+            >
+              <TuneTag :label="item.name" />
+            </span>
+          </div>
+
+          <ComboboxInput
+            class="mr-1 w-full min-w-[200px] py-2 !pr-[30px] pl-2 focus:outline-none"
+            spellcheck="false"
+            :class="{ 'cursor-not-allowed': disabled }"
+            :disabled="disabled"
+            @blur="searchInput = ''"
+            @change="searchInput = $event.target.value"
+          />
+        </div>
+      </ComboboxButton>
+      <ComboboxButton
+        class="absolute inset-y-0 right-1 flex items-center px-2 focus:outline-none"
+        :class="{ 'cursor-not-allowed': disabled }"
+      >
+        <i-ho-chevron-down class="text-sm" />
+      </ComboboxButton>
+      <ComboboxOptions
+        v-if="filteredItems.length > 0"
+        class="tune-listbox-options absolute z-40 mt-1 w-full overflow-hidden focus:outline-none"
+      >
+        <div class="max-h-[180px] overflow-y-auto">
+          <ComboboxOption
+            v-for="item in filteredItems"
+            v-slot="{ active, selected, disabled: itemDisabled }"
+            :key="item.id"
+            as="template"
+            :value="item"
+          >
+            <li
+              :class="[
+                { active: active },
+                'tune-listbox-item relative cursor-default select-none truncate py-2 pl-3 pr-[50px]'
+              ]"
+            >
+              <span
+                :class="[
+                  selected ? 'selected' : 'font-normal',
+                  { disabled: itemDisabled },
+                  'tune-listbox-item block truncate'
+                ]"
+              >
+                <slot v-if="$slots.item" name="item" :item="item" />
+                <span v-else>
+                  {{ item.name }}
+                </span>
+              </span>
+
+              <span
+                v-if="selected"
+                :class="['absolute inset-y-0 right-0 flex items-center pr-3']"
+              >
+                <i-ho-check class="text-sm" />
+              </span>
+            </li>
+          </ComboboxOption>
+        </div>
+      </ComboboxOptions>
+    </div>
+  </Combobox>
+</template>
diff --git a/src/components/Tune/TuneErrorInput.story.vue b/src/components/Tune/TuneErrorInput.story.vue
new file mode 100644
index 000000000..a57a936a9
--- /dev/null
+++ b/src/components/Tune/TuneErrorInput.story.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story>
+    <TuneErrorInput error="I'm an error" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneErrorInput.vue b/src/components/Tune/TuneErrorInput.vue
new file mode 100644
index 000000000..4bb0b19b6
--- /dev/null
+++ b/src/components/Tune/TuneErrorInput.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  error?: string;
+}>();
+</script>
+
+<template>
+  <div :class="['tune-error-text mt-[2px]']">
+    {{ error }}
+  </div>
+</template>
diff --git a/src/components/Tune/TuneForm.story.vue b/src/components/Tune/TuneForm.story.vue
new file mode 100644
index 000000000..9f2140e4c
--- /dev/null
+++ b/src/components/Tune/TuneForm.story.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+const schema = {
+  type: 'object',
+  title: 'Space',
+  additionalProperties: true,
+  required: ['name', 'about', 'categories'],
+  properties: {
+    name: {
+      type: 'string',
+      title: 'Name',
+      minLength: 1,
+      examples: ['Space name']
+    },
+    about: {
+      type: 'string',
+      format: 'long',
+      title: 'About',
+      description: 'A short description of your space.',
+      examples: ['Space description'],
+      minLength: 1
+    },
+    categories: {
+      type: 'array',
+      title: 'Categories',
+      examples: ['Select categories'],
+      minLength: 1,
+      items: {
+        type: 'string',
+        anyOf: [
+          {
+            const: 'social',
+            title: 'Social'
+          },
+          {
+            const: 'service',
+            title: 'Service'
+          }
+        ]
+      }
+    },
+    twitter: {
+      type: 'string',
+      title: 'Twitter',
+      examples: ['Twitter handle']
+    },
+    private: {
+      type: 'boolean',
+      title: 'private',
+      description: 'Set space to private.'
+    },
+    votingType: {
+      type: 'string',
+      title: 'Voting type',
+      description: 'Enforce voting type for your space.',
+      anyOf: [
+        {
+          const: 'single-choice',
+          title: 'Single choice'
+        },
+        {
+          const: 'approval',
+          title: 'Approval'
+        }
+      ]
+    }
+  }
+};
+
+const input = ref({
+  name: '',
+  about: '',
+  categories: [],
+  twitter: '',
+  private: false,
+  votingType: ''
+});
+const formRef = ref();
+
+function forceShowError() {
+  formRef?.value?.forceShowError();
+}
+</script>
+
+<template>
+  <Story>
+    <TuneForm
+      ref="formRef"
+      v-model="input"
+      :definition="schema"
+      :error="{
+        name: 'Invalid field',
+        about: 'Invalid field',
+        categories: 'Invalid field'
+      }"
+    />
+    <TuneButton primary class="mt-3" @click="forceShowError">
+      Show errors
+    </TuneButton>
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneForm.vue b/src/components/Tune/TuneForm.vue
new file mode 100644
index 000000000..bfe54edd3
--- /dev/null
+++ b/src/components/Tune/TuneForm.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import TuneForm from './TuneForm.vue';
+import FormString from './_Form/FormString.vue';
+import FormNumber from './_Form/FormNumber.vue';
+import FormBoolean from './_Form/FormBoolean.vue';
+import FormArray from './_Form/FormArray.vue';
+
+const props = defineProps<{
+  modelValue: Record<string, any>;
+  definition: Record<string, any>;
+  error: Record<string, any>;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const input = computed({
+  get: () => props.modelValue || props.definition?.default || {},
+  set: value => emit('update:modelValue', value)
+});
+
+const getComponent = (type: string) => {
+  switch (type) {
+    case 'object':
+      return TuneForm;
+    case 'string':
+      return FormString;
+    case 'number':
+      return FormNumber;
+    case 'boolean':
+      return FormBoolean;
+    case 'array':
+      return FormArray;
+    default:
+      return null;
+  }
+};
+
+const componentRefs = ref();
+
+function forceShowError() {
+  componentRefs?.value?.forEach((ref: any) => {
+    if (ref?.forceShowError) ref?.forceShowError();
+  });
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <div class="space-y-2">
+    <component
+      :is="getComponent(property.type)"
+      v-for="(property, key) in definition.properties as Record<string, any>"
+      ref="componentRefs"
+      :key="key"
+      v-model="input[key]"
+      :definition="property"
+      :error="error[key] || ''"
+    />
+  </div>
+</template>
diff --git a/src/components/Tune/TuneIconHint.story.vue b/src/components/Tune/TuneIconHint.story.vue
new file mode 100644
index 000000000..335d2da5a
--- /dev/null
+++ b/src/components/Tune/TuneIconHint.story.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story>
+    <div class="flex">
+      <TuneIconHint
+        hint="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+      />
+    </div>
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneIconHint.vue b/src/components/Tune/TuneIconHint.vue
new file mode 100644
index 000000000..aa054952d
--- /dev/null
+++ b/src/components/Tune/TuneIconHint.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  hint?: string;
+}>();
+</script>
+
+<template>
+  <span v-if="!!hint" v-tippy="{ content: hint }" class="tune-icon-hint">
+    <i-ho-question-mark-circle />
+  </span>
+</template>
diff --git a/src/components/Tune/TuneInput.story.vue b/src/components/Tune/TuneInput.story.vue
new file mode 100644
index 000000000..087f829b5
--- /dev/null
+++ b/src/components/Tune/TuneInput.story.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story>
+    <TuneInput label="My input" placeholder="Enter input" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneInput.vue b/src/components/Tune/TuneInput.vue
new file mode 100644
index 000000000..17f0d401a
--- /dev/null
+++ b/src/components/Tune/TuneInput.vue
@@ -0,0 +1,118 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+};
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    hint?: string;
+    loading?: boolean;
+    error?: string;
+    block?: boolean;
+    type?: 'text' | 'number';
+    modelValue?: string | number;
+    autofocus?: boolean;
+    placeholder?: string;
+    maxLength?: number;
+    readonly?: boolean;
+    disabled?: boolean;
+    definition?: any;
+  }>(),
+  {
+    label: '',
+    hint: '',
+    loading: false,
+    error: '',
+    block: true,
+    type: 'text',
+    modelValue: '',
+    autofocus: false,
+    placeholder: '',
+    maxLength: undefined,
+    readonly: false,
+    disabled: false,
+    definition: {}
+  }
+);
+
+defineEmits(['update:modelValue']);
+
+const inputRef = ref();
+
+const showErrorMessage = ref(false);
+
+function forceShowError() {
+  showErrorMessage.value = true;
+}
+
+defineExpose({
+  forceShowError
+});
+
+onMounted(() => {
+  if (props.autofocus) {
+    inputRef?.value?.focus();
+  }
+});
+</script>
+
+<template>
+  <div :class="{ 'w-full': block }">
+    <TuneLabelInput
+      v-if="label || definition?.title"
+      :hint="hint || definition?.description"
+    >
+      {{ label || definition.title }}
+    </TuneLabelInput>
+    <div class="flex">
+      <div :class="['group relative z-10 flex', { 'w-full': block }]">
+        <div
+          v-if="$slots.before"
+          class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
+        >
+          <slot name="before" />
+        </div>
+        <input
+          v-bind="$attrs"
+          ref="inputRef"
+          :type="type"
+          :value="modelValue"
+          :class="[
+            'tune-input px-3 py-2',
+            { 'tune-error-border': error && showErrorMessage },
+            { 'cursor-not-allowed': disabled },
+            { 'w-full': block }
+          ]"
+          :placeholder="placeholder || definition?.examples?.[0] || ''"
+          :readonly="readonly"
+          :disabled="disabled"
+          :maxlength="maxLength || definition?.maxLength"
+          @blur="error ? (showErrorMessage = true) : null"
+          @focus="error ? null : (showErrorMessage = false)"
+          @input="
+            $emit(
+              'update:modelValue',
+              ($event.target as HTMLInputElement).value
+            )
+          "
+        />
+        <div
+          v-if="loading || (error && showErrorMessage)"
+          class="tune-input-loading absolute inset-y-0 right-0 top-[1px] mr-1 flex h-[40px] items-center overflow-hidden pl-2 pr-2"
+        >
+          <TuneLoadingSpinner v-if="loading" />
+        </div>
+        <div
+          v-else-if="$slots.after"
+          class="absolute inset-y-0 right-0 flex items-center pr-4"
+        >
+          <slot name="after" />
+        </div>
+      </div>
+    </div>
+    <TuneErrorInput v-if="error && showErrorMessage" :error="error" />
+  </div>
+</template>
diff --git a/src/components/Tune/TuneInputDuration.story.vue b/src/components/Tune/TuneInputDuration.story.vue
new file mode 100644
index 000000000..c64761ba4
--- /dev/null
+++ b/src/components/Tune/TuneInputDuration.story.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const input = ref(14400);
+</script>
+
+<template>
+  <Story>
+    <div class="space-y-2">
+      <TuneInputDuration v-model="input" label="Duration" />
+      <TuneInputDuration
+        v-model="input"
+        label="Duration without minutes"
+        hide-minutes
+      />
+      <TuneInputDuration
+        v-model="input"
+        label="Duration without days"
+        hide-day
+      />
+    </div>
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneInputDuration.vue b/src/components/Tune/TuneInputDuration.vue
new file mode 100644
index 000000000..51ba42812
--- /dev/null
+++ b/src/components/Tune/TuneInputDuration.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+interface DurationInputProps {
+  modelValue: number;
+  label?: string;
+  hint?: string;
+  definition?: any;
+  hideDay?: boolean;
+  hideMinutes?: boolean;
+  disabled?: boolean;
+  block?: boolean;
+}
+
+const props = defineProps<DurationInputProps>();
+const emit = defineEmits(['update:modelValue']);
+
+const duration = computed<any>({
+  get() {
+    if (props.hideDay) {
+      return {
+        hours: Math.floor(props.modelValue / 3600),
+        minutes: Math.floor((props.modelValue % 3600) / 60)
+      };
+    }
+    if (props.hideMinutes) {
+      return {
+        days: Math.floor(props.modelValue / 86400),
+        hours: Math.floor((props.modelValue % 86400) / 3600)
+      };
+    }
+    return {
+      days: Math.floor(props.modelValue / 86400),
+      hours: Math.floor((props.modelValue % 86400) / 3600),
+      minutes: Math.floor((props.modelValue % 3600) / 60)
+    };
+  },
+  set(newDuration) {
+    const minutes = newDuration.minutes || 0;
+    const hours = newDuration.hours || 0;
+    const days = newDuration.days || 0;
+    const totalSeconds = days * 86400 + hours * 3600 + minutes * 60;
+    emit('update:modelValue', totalSeconds);
+  }
+});
+
+const inputItems = computed(() => {
+  return [
+    {
+      key: 'days',
+      label: 'Days',
+      hidden: props.hideDay || false,
+      max: 365
+    },
+    {
+      key: 'hours',
+      label: 'Hours',
+      hidden: false,
+      max: 24
+    },
+    {
+      key: 'minutes',
+      label: 'Minutes',
+      hidden: props.hideMinutes || false,
+      max: 60
+    }
+  ];
+});
+
+const updateDuration = (key: string, value: number) => {
+  if (isNaN(value) || value === undefined) return;
+  duration.value = { ...duration.value, [key]: value };
+};
+
+const inputRef = ref<any[]>([]);
+
+function addRef(ref: any) {
+  inputRef.value.push(ref);
+}
+</script>
+
+<template>
+  <div>
+    <TuneLabelInput :hint="hint || definition?.description">
+      {{ label || definition?.title }}
+    </TuneLabelInput>
+    <div
+      :class="[
+        'tune-input-duration inline-flex overflow-hidden',
+        { 'w-full': block },
+        { disabled: disabled }
+      ]"
+      @click="inputRef?.[0].focus()"
+    >
+      <template v-for="item in inputItems" :key="item.label">
+        <div v-if="!item.hidden" class="flex items-center first:-ml-3">
+          <input
+            :ref="addRef"
+            :value="duration[item.key]"
+            type="number"
+            min="0"
+            :max="item.max"
+            placeholder="0"
+            :disabled="disabled"
+            :class="[
+              'bg-transparent py-2 pl-4 pr-1 outline-none',
+              { 'cursor-not-allowed bg-transparent': disabled }
+            ]"
+            @click.stop
+            @input="
+              updateDuration(
+                item.key,
+                ($event.target as HTMLInputElement)?.valueAsNumber
+              )
+            "
+          />
+          <span class="tune-input-duration-label">
+            {{ item.label }}
+          </span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+</style>
diff --git a/src/components/Tune/TuneInputSocial.vue b/src/components/Tune/TuneInputSocial.vue
new file mode 100644
index 000000000..68493ba11
--- /dev/null
+++ b/src/components/Tune/TuneInputSocial.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue?: string;
+  error?: string;
+  placeholder?: string;
+  maxLength?: number;
+  label?: string;
+  disabled?: boolean;
+  icon?: 'twitter' | 'github' | 'earth' | 'coingecko';
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const inputRef = ref();
+
+function forceShowError() {
+  inputRef?.value?.forceShowError();
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <TuneInput
+    ref="inputRef"
+    :label="label"
+    :model-value="modelValue"
+    :error="error"
+    :placeholder="placeholder"
+    :max-length="maxLength"
+    :disabled="disabled"
+    class="!pl-[40px]"
+    @update:model-value="(value: string) => emit('update:modelValue', value)"
+  >
+    <template #before>
+      <i-s-twitter v-if="icon === 'twitter'" class="text-[16px]" />
+      <i-s-github v-if="icon === 'github'" class="text-[16px]" />
+      <i-ho-globe-alt v-if="icon === 'earth'" class="text-[16px]" />
+      <i-s-coingecko v-if="icon === 'coingecko'" class="text-[16px]" />
+    </template>
+  </TuneInput>
+</template>
diff --git a/src/components/Tune/TuneInputUrl.vue b/src/components/Tune/TuneInputUrl.vue
new file mode 100644
index 000000000..62d2849b5
--- /dev/null
+++ b/src/components/Tune/TuneInputUrl.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue?: string;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  hint?: string;
+  disabled?: boolean;
+  maxLength?: number;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const inputRef = ref();
+
+function forceShowError() {
+  inputRef?.value?.forceShowError();
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <TuneInput
+    ref="inputRef"
+    :label="label"
+    :model-value="modelValue"
+    :error="error"
+    :hint="hint"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :max-length="maxLength"
+    class="!pl-[40px]"
+    @update:model-value="input => emit('update:modelValue', input)"
+  >
+    <template #before>
+      <i-ho-globe-alt class="text-sm" />
+    </template>
+  </TuneInput>
+</template>
diff --git a/src/components/Tune/TuneLabelInput.story.vue b/src/components/Tune/TuneLabelInput.story.vue
new file mode 100644
index 000000000..dfffc09e0
--- /dev/null
+++ b/src/components/Tune/TuneLabelInput.story.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story>
+    <TuneLabelInput
+      hint="I'm a hint"
+      sublabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod."
+    >
+      Label
+    </TuneLabelInput>
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneLabelInput.vue b/src/components/Tune/TuneLabelInput.vue
new file mode 100644
index 000000000..c494640d7
--- /dev/null
+++ b/src/components/Tune/TuneLabelInput.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  hint?: string;
+  sublabel?: string;
+}>();
+</script>
+
+<template>
+  <div class="tune-label-container flex flex-col">
+    <div class="tune-label flex items-center gap-1">
+      <slot />
+      <TuneIconHint :hint="hint" />
+    </div>
+    <div v-if="sublabel" class="tune-sublabel">
+      {{ sublabel }}
+    </div>
+  </div>
+</template>
diff --git a/src/components/Tune/TuneListbox.story.vue b/src/components/Tune/TuneListbox.story.vue
new file mode 100644
index 000000000..3bce8875d
--- /dev/null
+++ b/src/components/Tune/TuneListbox.story.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const items = [
+  { name: 'One', value: 1 },
+  { name: 'Two', value: 2 },
+  { name: 'Three', value: 3 }
+];
+
+const input = ref(1);
+</script>
+
+<template>
+  <Story>
+    <TuneListbox v-model="input" :items="items" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneListbox.vue b/src/components/Tune/TuneListbox.vue
new file mode 100644
index 000000000..f4a2c6239
--- /dev/null
+++ b/src/components/Tune/TuneListbox.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+  ListboxLabel
+} from '@headlessui/vue';
+import isEqual from 'lodash/isEqual';
+
+type ListboxItem = {
+  value: any;
+  name?: string;
+  extras?: Record<string, any>;
+};
+
+const props = defineProps<{
+  items: ListboxItem[];
+  modelValue: any;
+  label?: string;
+  disabled?: boolean;
+  definition?: any;
+  hint?: string;
+  error?: string;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const selectedItem = computed({
+  get: () =>
+    props.items.find(item => isEqual(item.value, props.modelValue)) ?? {
+      value: ''
+    },
+  set: newVal => emit('update:modelValue', newVal.value)
+});
+
+const showErrorMessage = ref(false);
+
+function forceShowError() {
+  showErrorMessage.value = true;
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <div>
+    <Listbox v-model="selectedItem" as="div" :disabled="disabled">
+      <ListboxLabel>
+        <TuneLabelInput :hint="hint || definition?.description">
+          {{ label || definition?.title }}
+        </TuneLabelInput>
+      </ListboxLabel>
+      <div class="relative">
+        <ListboxButton
+          class="tune-listbox-button relative h-[42px] w-full truncate pl-3 pr-[40px] text-left"
+          :class="[
+            { 'disabled cursor-not-allowed': disabled },
+            {
+              error: showErrorMessage && error
+            }
+          ]"
+        >
+          <slot
+            v-if="$slots.selected"
+            name="selected"
+            :selected-item="selectedItem"
+          />
+
+          <span v-else-if="selectedItem?.value">
+            {{ selectedItem?.name || selectedItem?.value }}
+          </span>
+          <span v-else class="tune-listbox-placeholder"> Select </span>
+          <span
+            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-[12px]"
+          >
+            <i-ho-chevron-down class="text-sm" />
+          </span>
+        </ListboxButton>
+        <transition
+          enter-active-class="transition duration-100 ease-out"
+          enter-from-class="transform -translate-y-2 scale-95 opacity-0"
+          enter-to-class="transform scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-out"
+          leave-from-class="transform scale-100 opacity-100"
+          leave-to-class="transform scale-95 opacity-0"
+        >
+          <ListboxOptions
+            class="tune-listbox-options absolute z-40 mt-1 w-full overflow-hidden focus:outline-none"
+          >
+            <div class="max-h-[180px] overflow-y-auto">
+              <ListboxOption
+                v-for="item in items"
+                :key="item.value"
+                v-slot="{ active, selected, disabled: itemDisabled }"
+                as="template"
+                :value="item"
+              >
+                <li
+                  :class="[
+                    { active: active && !itemDisabled },
+                    'tune-listbox-item relative cursor-default select-none py-2 pl-3 pr-[50px]'
+                  ]"
+                >
+                  <span
+                    :class="[
+                      selected ? 'selected' : 'font-normal',
+                      { disabled: itemDisabled },
+                      'tune-listbox-item block truncate'
+                    ]"
+                  >
+                    <slot v-if="$slots.item" name="item" :item="item" />
+                    <span v-else>
+                      {{ item?.name || item.value }}
+                    </span>
+                  </span>
+
+                  <span
+                    v-if="selected"
+                    :class="[
+                      'absolute inset-y-0 right-0 flex items-center pr-3'
+                    ]"
+                  >
+                    <i-ho-check class="text-sm" />
+                  </span>
+                </li>
+              </ListboxOption>
+            </div>
+          </ListboxOptions>
+        </transition>
+      </div>
+    </Listbox>
+    <TuneErrorInput v-if="error && showErrorMessage" :error="error" />
+  </div>
+</template>
diff --git a/src/components/Tune/TuneListboxMultiple.story.vue b/src/components/Tune/TuneListboxMultiple.story.vue
new file mode 100644
index 000000000..16cf1f586
--- /dev/null
+++ b/src/components/Tune/TuneListboxMultiple.story.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const items = [
+  { name: 'One', value: 1 },
+  { name: 'Two', value: 2 },
+  { name: 'Three', value: 3 }
+];
+
+const input = ref(['1']);
+</script>
+
+<template>
+  <Story>
+    <TuneListboxMultiple v-model="input" :items="items" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneListboxMultiple.vue b/src/components/Tune/TuneListboxMultiple.vue
new file mode 100644
index 000000000..16736f3fa
--- /dev/null
+++ b/src/components/Tune/TuneListboxMultiple.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+  ListboxLabel
+} from '@headlessui/vue';
+
+type ListboxItem = {
+  value: any;
+  name?: string;
+  extras?: Record<string, any>;
+};
+
+const props = defineProps<{
+  modelValue?: string[];
+  items: ListboxItem[];
+  definition?: any;
+  label?: string;
+  placeholder?: string;
+  limit?: number;
+  disabled?: boolean;
+  hint?: string;
+  error?: string;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const selectedItems = computed({
+  get: () =>
+    props.items.filter(item => props.modelValue?.includes(item.value)) || [],
+  set: newVal =>
+    emit(
+      'update:modelValue',
+      newVal.map(item => item.value)
+    )
+});
+
+function isItemDisabled(item: string) {
+  if (!props.limit) return false;
+  if (selectedItems.value.length < props.limit) return false;
+  return !selectedItems.value.some(selectedItem => selectedItem.value === item);
+}
+
+const showErrorMessage = ref(false);
+
+function forceShowError() {
+  showErrorMessage.value = true;
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <div>
+    <Listbox v-model="selectedItems" as="div" :disabled="disabled" multiple>
+      <ListboxLabel>
+        <TuneLabelInput :hint="hint || definition?.description">
+          {{ label || definition?.title }}
+        </TuneLabelInput>
+      </ListboxLabel>
+      <div class="relative">
+        <ListboxButton
+          v-tippy="{
+            content: selectedItems
+              .map(item => item?.name || item.value)
+              .join(', ')
+          }"
+          :class="[
+            'tune-listbox-button relative h-[42px] w-full truncate pl-3 pr-[40px] text-left',
+            { 'disabled cursor-not-allowed': disabled },
+            {
+              error: showErrorMessage && error
+            }
+          ]"
+        >
+          <span
+            v-if="selectedItems.length < 1"
+            class="tune-listbox-placeholder"
+          >
+            {{ placeholder || definition?.examples?.[0] }}
+          </span>
+
+          <slot
+            v-else-if="$slots.selected"
+            name="selected"
+            :selected-items="selectedItems"
+          />
+
+          <span v-else>
+            {{ selectedItems.map(item => item?.name || item.value).join(', ') }}
+          </span>
+          <span
+            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-[12px]"
+          >
+            <i-ho-chevron-down class="text-sm" />
+          </span>
+        </ListboxButton>
+        <transition
+          enter-active-class="transition duration-100 ease-out"
+          enter-from-class="transform -translate-y-2 scale-95 opacity-0"
+          enter-to-class="transform scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-out"
+          leave-from-class="transform scale-100 opacity-100"
+          leave-to-class="transform scale-95 opacity-0"
+        >
+          <ListboxOptions
+            class="tune-listbox-options absolute z-40 mt-1 w-full overflow-hidden focus:outline-none"
+          >
+            <div class="max-h-[180px] overflow-y-auto">
+              <ListboxOption
+                v-for="(item, i) in items"
+                :key="i"
+                v-slot="{ active, selected, disabled: itemDisabled }"
+                as="template"
+                :value="item"
+                :disabled="isItemDisabled(item.value)"
+              >
+                <li
+                  :class="[
+                    { active: active },
+                    'tune-listbox-item relative cursor-default select-none py-2 pl-3 pr-[50px]'
+                  ]"
+                >
+                  <span
+                    :class="[
+                      selected ? 'selected' : 'font-normal',
+                      { disabled: itemDisabled },
+                      'tune-listbox-item block truncate'
+                    ]"
+                  >
+                    <slot v-if="$slots.item" name="item" :item="item" />
+                    <span v-else>
+                      {{ item?.name || item.value }}
+                    </span>
+                  </span>
+
+                  <span
+                    v-if="selected"
+                    :class="[
+                      'absolute inset-y-0 right-0 flex items-center pr-3'
+                    ]"
+                  >
+                    <i-ho-check class="text-sm" />
+                  </span>
+                </li>
+              </ListboxOption>
+            </div>
+          </ListboxOptions>
+        </transition>
+      </div>
+    </Listbox>
+    <TuneErrorInput v-if="error && showErrorMessage" :error="error" />
+  </div>
+</template>
diff --git a/src/components/Tune/TuneLoadingSpinner.story.vue b/src/components/Tune/TuneLoadingSpinner.story.vue
new file mode 100644
index 000000000..c1d568388
--- /dev/null
+++ b/src/components/Tune/TuneLoadingSpinner.story.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story>
+    <TuneLoadingSpinner />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneLoadingSpinner.vue b/src/components/Tune/TuneLoadingSpinner.vue
new file mode 100644
index 000000000..818b31f28
--- /dev/null
+++ b/src/components/Tune/TuneLoadingSpinner.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flex items-center">
+    <i-s-spinner class="h-[22px] animate-spin" />
+  </div>
+</template>
diff --git a/src/components/Tune/TuneMenu.story.vue b/src/components/Tune/TuneMenu.story.vue
new file mode 100644
index 000000000..9b2770ab9
--- /dev/null
+++ b/src/components/Tune/TuneMenu.story.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const items = [
+  {
+    text: 'View profile',
+    action: 'viewProfile',
+    extras: { icon: 'profile' }
+  },
+  {
+    text: 'Delegate',
+    action: 'delegate',
+    extras: { icon: 'user-add' }
+  },
+  {
+    text: 'Switch wallet',
+    action: 'switchWallet',
+    extras: { icon: 'switch' }
+  },
+  { text: 'Log out', action: 'logout', extras: { icon: 'logout' } }
+];
+</script>
+
+<template>
+  <Story>
+    <TuneMenu :items="items" selected="Button" class="m-5" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneMenu.vue b/src/components/Tune/TuneMenu.vue
new file mode 100644
index 000000000..d38009c18
--- /dev/null
+++ b/src/components/Tune/TuneMenu.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { Float } from '@headlessui-float/vue';
+import type { Placement } from '@floating-ui/dom';
+
+type Item = {
+  text: string;
+  action: string;
+  extras?: any;
+};
+
+withDefaults(
+  defineProps<{
+    items: Item[];
+    selected?: string;
+    placement?: Placement;
+  }>(),
+  {
+    selected: '',
+    placement: 'bottom-start'
+  }
+);
+
+const emit = defineEmits(['select']);
+</script>
+
+<template>
+  <Menu as="div" class="inline-block h-full text-left">
+    <Float
+      enter="transition ease-out duration-100"
+      enter-from="transform opacity-0 scale-95"
+      enter-to="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leave-from="transform opacity-100 scale-100"
+      leave-to="transform opacity-0 scale-95"
+      :placement="placement"
+      :offset="8"
+      :shift="16"
+      :flip="16"
+      :z-index="50"
+    >
+      <MenuButton class="h-full">
+        <slot v-if="$slots.button" name="button" />
+
+        <TuneButton v-else class="flex items-center">
+          {{ selected }}
+          <i-ho-chevron-down class="-mr-1 ml-1 text-sm" aria-hidden="true" />
+        </TuneButton>
+      </MenuButton>
+
+      <MenuItems class="tune-menu-list overflow-hidden outline-none">
+        <div class="no-scrollbar max-h-[300px] overflow-auto">
+          <MenuItem v-for="item in items" :key="item.text" v-slot="{ active }">
+            <div
+              :class="[
+                { active: active },
+                'tune-menu-list-item cursor-pointer whitespace-nowrap px-3 py-2'
+              ]"
+              @click="emit('select', item.action)"
+            >
+              <slot :key="item" name="item" :item="item">
+                {{ item.text }}
+              </slot>
+            </div>
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </Float>
+  </Menu>
+</template>
diff --git a/src/components/Tune/TuneModal.story.vue b/src/components/Tune/TuneModal.story.vue
new file mode 100644
index 000000000..2a3633a89
--- /dev/null
+++ b/src/components/Tune/TuneModal.story.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Story>
+    <TuneButton @click="isOpen = true">Open modal</TuneButton>
+    <TuneModal :open="isOpen" title="My modal" @close="isOpen = false">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio illo
+      expedita libero, eaque iste aliquam praesentium necessitatibus ipsum
+      impedit hic temporibus officia omnis deleniti, at sint, doloremque atque
+      sit id?
+    </TuneModal>
+  </Story>
+</template>
+
+<docs lang="md">
+# TuneModal
+
+The TuneModal component provides a modal dialog box that appears on top of the current page, dimming the background content and prompting the user for an action. This component uses the @headlessui/vue package for creating accessible dialogs and transitions.
+
+### Props
+
+- **open**: a boolean value that determines whether the modal should be shown or hidden. When true, the modal is displayed; otherwise, it is hidden. This property is required.
+- **title**: a string value that specifies the title of the modal dialog box.
+
+### Slots
+
+The TuneModal component provides two slots for inserting content:
+
+- **Default slot**: Use this slot to add the main content of the modal dialog box. You can include any valid HTML markup, such as text, images, forms, or other components.
+
+- **Footer slot**: Use this slot to add any additional buttons, links, or other UI elements to the bottom of the modal dialog box.
+
+### Emits
+
+- **close**: an event emitted when the user closes the modal dialog box. This event does not contain any data.
+</docs>
diff --git a/src/components/Tune/TuneModal.vue b/src/components/Tune/TuneModal.vue
new file mode 100644
index 000000000..3455ddd88
--- /dev/null
+++ b/src/components/Tune/TuneModal.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue';
+
+defineEmits(['close']);
+
+defineProps<{ open: boolean; title: string }>();
+</script>
+
+<template>
+  <TransitionRoot appear :show="open" as="template">
+    <Dialog as="div" class="relative z-10" @close="$emit('close')">
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="tune-modal-backdrop fixed inset-0" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              class="tune-modal-panel w-full transform overflow-hidden align-middle transition-all"
+            >
+              <div class="absolute right-4 top-4">
+                <button @click="$emit('close')">
+                  <span class="sr-only">Close</span>
+                  <i-ho-x class="text-md" aria-hidden="true" />
+                </button>
+              </div>
+              <DialogTitle as="h3" class="tune-modal-title">
+                {{ title }}
+              </DialogTitle>
+              <div class="mt-4"><slot /></div>
+
+              <div v-if="$slots.footer" class="mt-4">
+                <slot name="footer" />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
diff --git a/src/components/Tune/TunePopover.story.vue b/src/components/Tune/TunePopover.story.vue
new file mode 100644
index 000000000..b91d41b28
--- /dev/null
+++ b/src/components/Tune/TunePopover.story.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story>
+    <TunePopover label="Button">
+      <template #content>
+        <div>
+          <div class="p-3">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
+            aperiam vitae eveniet vel ex praesentium nam quis deserunt porro
+            harum. Magni maiores ipsa ea? Rem, quidem. Quas sunt ducimus rerum.
+          </div>
+        </div>
+      </template>
+    </TunePopover>
+  </Story>
+</template>
diff --git a/src/components/Tune/TunePopover.vue b/src/components/Tune/TunePopover.vue
new file mode 100644
index 000000000..ef9cb79dc
--- /dev/null
+++ b/src/components/Tune/TunePopover.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
+import { Float } from '@headlessui-float/vue';
+import type { Placement } from '@floating-ui/dom';
+
+withDefaults(
+  defineProps<{
+    label?: string;
+    placement?: Placement;
+  }>(),
+  {
+    label: '',
+    placement: 'bottom-end'
+  }
+);
+</script>
+
+<template>
+  <Popover>
+    <Float
+      enter="transition ease-out duration-100"
+      enter-from="transform opacity-0 scale-95"
+      enter-to="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leave-from="transform opacity-100 scale-100"
+      leave-to="transform opacity-0 scale-95"
+      :placement="placement"
+      :offset="4"
+      :shift="16"
+      :flip="16"
+      :z-index="50"
+      portal
+    >
+      <PopoverButton class="outline-none">
+        <slot v-if="$slots.button" name="button" />
+        <TuneButton v-else class="flex items-center gap-1">
+          <span>{{ label }}</span>
+          <i-ho-chevron-down class="text-sm" aria-hidden="true" />
+        </TuneButton>
+      </PopoverButton>
+
+      <PopoverPanel
+        v-slot="{ close }"
+        class="w-screen max-w-xs outline-none sm:max-w-sm"
+      >
+        <div class="tune-popover overflow-hidden">
+          <div
+            class="no-scrollbar max-h-[85vh] overflow-y-auto overscroll-contain"
+          >
+            <slot name="content" :close="close" />
+          </div>
+        </div>
+      </PopoverPanel>
+    </Float>
+  </Popover>
+</template>
diff --git a/src/components/Tune/TuneRadio.story.vue b/src/components/Tune/TuneRadio.story.vue
new file mode 100644
index 000000000..a58e3e13e
--- /dev/null
+++ b/src/components/Tune/TuneRadio.story.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const input = ref('1');
+</script>
+
+<template>
+  <Story>
+    <TuneRadio
+      v-model="input"
+      value="1"
+      label="Switch me"
+      hint="I'm radio 1"
+      class="m-1"
+    />
+    <TuneRadio
+      v-model="input"
+      value="2"
+      label="Switch me"
+      hint="I'm radio 2"
+      class="m-1"
+    />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneRadio.vue b/src/components/Tune/TuneRadio.vue
new file mode 100644
index 000000000..a872301df
--- /dev/null
+++ b/src/components/Tune/TuneRadio.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: string;
+  value: string;
+  id?: string;
+  label?: string;
+  hint?: string;
+  definition?: any;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const onChange = (event: Event) => {
+  if (event.target && (event.target as HTMLInputElement).checked) {
+    emit('update:modelValue', props.value);
+  }
+};
+</script>
+
+<template>
+  <div>
+    <label :for="id || value">
+      <div class="flex items-center gap-[10px]">
+        <input
+          :id="id || value"
+          type="radio"
+          :name="label || definition?.title"
+          :checked="modelValue === value"
+          :value="value"
+          class="tune-input-radio"
+          @input="onChange"
+        />
+        <TuneLabelInput v-if="hint || definition?.description" class="!mb-0">
+          {{ hint || definition.description }}
+        </TuneLabelInput>
+      </div>
+    </label>
+  </div>
+</template>
diff --git a/src/components/Tune/TuneSelect.vue b/src/components/Tune/TuneSelect.vue
new file mode 100644
index 000000000..8d4cecf3a
--- /dev/null
+++ b/src/components/Tune/TuneSelect.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+type Item = {
+  label: string;
+  value: string | number;
+};
+
+defineProps<{
+  items: Item[];
+  modelValue: string | number;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+function handleChange(event: any) {
+  emit('update:modelValue', event.target.value);
+}
+</script>
+
+<template>
+  <select
+    :disabled="disabled"
+    :value="modelValue"
+    :class="['tune-select form-select', { disabled: disabled }]"
+    @change="handleChange($event)"
+  >
+    <option v-for="(item, index) in items" :key="index" :value="item.value">
+      {{ item.label }}
+    </option>
+  </select>
+</template>
diff --git a/src/components/Tune/TuneSwitch.story.vue b/src/components/Tune/TuneSwitch.story.vue
new file mode 100644
index 000000000..c044d4afc
--- /dev/null
+++ b/src/components/Tune/TuneSwitch.story.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const input = ref(false);
+</script>
+
+<template>
+  <Story>
+    <TuneSwitch
+      v-model="input"
+      label="Switch me"
+      hint="I'm a switch"
+      sublabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod."
+    />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneSwitch.vue b/src/components/Tune/TuneSwitch.vue
new file mode 100644
index 000000000..eef25202a
--- /dev/null
+++ b/src/components/Tune/TuneSwitch.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { Switch } from '@headlessui/vue';
+
+type Definition = {
+  title: string;
+  description: string;
+  sublabel: string;
+};
+
+defineProps<{
+  modelValue: boolean;
+  label?: string;
+  sublabel?: string;
+  hint?: string;
+  definition?: Partial<Definition>;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <div
+    class="flex space-x-2 pr-2 pt-1"
+    :class="sublabel || definition?.sublabel ? 'items-start' : 'items-center'"
+  >
+    <Switch
+      :model-value="modelValue"
+      :class="[
+        'tune-switch relative inline-flex h-[22px] w-[38px] flex-shrink-0 cursor-pointer rounded-full border-2 transition-colors duration-200 ease-in-out',
+        modelValue ? 'switched-on-bg' : 'switched-off-bg',
+        { '!cursor-not-allowed ': disabled }
+      ]"
+      :disabled="disabled"
+      @update:model-value="value => emit('update:modelValue', value)"
+    >
+      <span v-if="label || definition?.title" class="sr-only">
+        {{ label || definition?.title }}
+      </span>
+      <span
+        :class="[
+          modelValue ? 'translate-x-[16px]' : 'translate-x-0',
+          'shadow tune-switch-button pointer-events-none inline-block h-[18px] w-[18px] transform rounded-full transition duration-200 ease-in-out'
+        ]"
+      >
+        <span
+          :class="[
+            modelValue
+              ? 'opacity-0 duration-100 ease-out'
+              : 'opacity-100 duration-200 ease-in',
+            'tune-switch switched-off-text absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+          ]"
+          aria-hidden="true"
+        >
+          <svg class="h-[10px] w-[10px]" fill="none" viewBox="0 0 12 12">
+            <path
+              d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+        <span
+          :class="[
+            modelValue
+              ? 'opacity-100 duration-200 ease-in'
+              : 'opacity-0 duration-100 ease-out',
+            'tune-switch switched-on-text absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+          ]"
+          aria-hidden="true"
+        >
+          <svg
+            class="h-[10px] w-[10px]"
+            fill="currentColor"
+            viewBox="0 0 12 12"
+          >
+            <path
+              d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+            />
+          </svg>
+        </span>
+      </span>
+    </Switch>
+    <TuneLabelInput
+      v-if="label || definition?.title"
+      :hint="hint || definition?.description"
+      :sublabel="sublabel || definition?.sublabel"
+    >
+      {{ label || definition?.title }}
+    </TuneLabelInput>
+  </div>
+</template>
diff --git a/src/components/Tune/TuneTag.story.vue b/src/components/Tune/TuneTag.story.vue
new file mode 100644
index 000000000..790c7360d
--- /dev/null
+++ b/src/components/Tune/TuneTag.story.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <Story>
+    <TuneTag label="Social" />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneTag.vue b/src/components/Tune/TuneTag.vue
new file mode 100644
index 000000000..affe14c59
--- /dev/null
+++ b/src/components/Tune/TuneTag.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  label: string | number;
+}>();
+</script>
+
+<template>
+  <span class="tune-tag">
+    {{ label }}
+  </span>
+</template>
diff --git a/src/components/Tune/TuneTextarea.story.vue b/src/components/Tune/TuneTextarea.story.vue
new file mode 100644
index 000000000..9a4033801
--- /dev/null
+++ b/src/components/Tune/TuneTextarea.story.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const input = ref('');
+</script>
+
+<template>
+  <Story>
+    <TuneTextarea
+      v-model="input"
+      label="About you"
+      placeholder="Tell us about yourself"
+    />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneTextarea.vue b/src/components/Tune/TuneTextarea.vue
new file mode 100644
index 000000000..e769dae11
--- /dev/null
+++ b/src/components/Tune/TuneTextarea.vue
@@ -0,0 +1,102 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+};
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    definition?: any;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    error?: string;
+    autosize?: boolean;
+    disabled?: boolean;
+    maxLength?: number;
+  }>(),
+  {
+    label: '',
+    hint: '',
+    placeholder: '',
+    error: '',
+    autosize: true,
+    disabled: false,
+    maxLength: undefined,
+    definition: undefined
+  }
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+const input = computed({
+  get: () => props.modelValue || props.definition?.default || '',
+  set: value => emit('update:modelValue', value)
+});
+
+const textareaRef = ref();
+const showErrorMessage = ref(false);
+const inputHeight = ref('auto');
+
+const autoResizeStyles = computed(() => {
+  if (!props.autosize) return '';
+  return `resize: none; height: ${inputHeight.value};`;
+});
+
+function forceShowError() {
+  showErrorMessage.value = true;
+}
+
+function adjustHeight() {
+  inputHeight.value = 'auto';
+  nextTick(() => {
+    if (!textareaRef.value) return;
+    let contentHeight = textareaRef.value.scrollHeight + 1;
+    inputHeight.value = `${contentHeight}px`;
+  });
+}
+
+defineExpose({
+  forceShowError
+});
+
+watch(input, value => {
+  nextTick(adjustHeight);
+  if (value) adjustHeight();
+});
+
+onMounted(() => adjustHeight());
+</script>
+
+<template>
+  <div>
+    <TuneLabelInput :hint="hint || definition?.description">
+      {{ label || definition?.title }}
+    </TuneLabelInput>
+    <textarea
+      v-bind="$attrs"
+      ref="textareaRef"
+      v-model="input"
+      :class="[
+        'tune-textarea w-full',
+        {
+          'tune-error-border': !!error && showErrorMessage
+        },
+        { disabled: disabled }
+      ]"
+      :style="autoResizeStyles"
+      :placeholder="placeholder || definition?.examples?.[0]"
+      :disabled="disabled"
+      :maxlength="maxLength || definition?.maxLength"
+      @blur="error ? (showErrorMessage = true) : null"
+      @focus="error ? null : (showErrorMessage = false)"
+    />
+    <TuneErrorInput
+      v-if="error && showErrorMessage"
+      class="!-mt-1"
+      :error="error"
+    />
+  </div>
+</template>
diff --git a/src/components/Tune/TuneTextareaArray.story.vue b/src/components/Tune/TuneTextareaArray.story.vue
new file mode 100644
index 000000000..8e7a5c788
--- /dev/null
+++ b/src/components/Tune/TuneTextareaArray.story.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const input = ref([]);
+</script>
+
+<template>
+  <Story>
+    <TuneTextareaArray
+      v-model="input"
+      label="Addresses"
+      :placeholder="`0xBdCA4F610e7101Cc172E2135ba025737B99AbD30\n0xbc61f6973cE564eFFB16Cd79B5BC3916eaD592E2`"
+    />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneTextareaArray.vue b/src/components/Tune/TuneTextareaArray.vue
new file mode 100644
index 000000000..ff4bb84c2
--- /dev/null
+++ b/src/components/Tune/TuneTextareaArray.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string[];
+  definition?: any;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+function handleInput(input: string) {
+  const inputString = input
+    .replace(/\n/g, ' ')
+    .replace(/,/g, ' ')
+    .replace(/;/g, ' ')
+    .split(' ')
+    .map(item => item.trim())
+    .filter(item => !!item)
+    .filter((item, index, array) => array.indexOf(item) === index);
+  emit('update:modelValue', inputString);
+}
+
+const textareaRef = ref();
+
+function forceShowError() {
+  textareaRef?.value?.forceShowError();
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <TuneTextarea
+    ref="textareaRef"
+    :model-value="modelValue?.join('\n')"
+    :definition="definition"
+    :label="label"
+    :placeholder="placeholder || definition?.examples?.join('\n') || ''"
+    :error="error"
+    @update:model-value="handleInput($event)"
+  />
+</template>
diff --git a/src/components/Tune/TuneTextareaJson.story.vue b/src/components/Tune/TuneTextareaJson.story.vue
new file mode 100644
index 000000000..6d0214a49
--- /dev/null
+++ b/src/components/Tune/TuneTextareaJson.story.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const input = ref({ test: 1 });
+</script>
+
+<template>
+  <Story>
+    <TuneTextareaJson
+      v-model="input"
+      label="About you"
+      placeholder="Tell us about yourself"
+    />
+  </Story>
+</template>
diff --git a/src/components/Tune/TuneTextareaJson.vue b/src/components/Tune/TuneTextareaJson.vue
new file mode 100644
index 000000000..18624a6a6
--- /dev/null
+++ b/src/components/Tune/TuneTextareaJson.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: Record<string, unknown> | any[];
+  definition?: any;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'update:isValid']);
+
+const input = ref('');
+const errorJson = ref('');
+
+function handleInput() {
+  try {
+    emit('update:modelValue', JSON.parse(input.value));
+    emit('update:isValid', true);
+    errorJson.value = '';
+  } catch (e: any) {
+    emit('update:isValid', false);
+    errorJson.value = e?.message;
+  }
+}
+
+watch(input, () => handleInput());
+
+if (props.modelValue) input.value = JSON.stringify(props.modelValue, null, 2);
+
+const textareaRef = ref();
+
+function forceShowError() {
+  textareaRef?.value?.forceShowError();
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <TuneTextarea
+    ref="textareaRef"
+    v-model="input"
+    :definition="definition"
+    :label="label"
+    :placeholder="placeholder"
+    :error="errorJson || error"
+    class="tune-textarea-json font-mono"
+  />
+</template>
diff --git a/src/components/Tune/_Form/FormArray.vue b/src/components/Tune/_Form/FormArray.vue
new file mode 100644
index 000000000..169fb0533
--- /dev/null
+++ b/src/components/Tune/_Form/FormArray.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import cloneDeep from 'lodash/cloneDeep';
+
+import TuneForm from '../TuneForm.vue';
+import FormString from './FormString.vue';
+import FormNumber from './FormNumber.vue';
+import FormBoolean from './FormBoolean.vue';
+
+const props = defineProps<{
+  modelValue: any[];
+  definition: any;
+  error: any;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const input = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value)
+});
+
+const getComponent = (type: string) => {
+  switch (type) {
+    case 'object':
+      return TuneForm;
+    case 'string':
+      return FormString;
+    case 'number':
+      return FormNumber;
+    case 'boolean':
+      return FormBoolean;
+    default:
+      return null;
+  }
+};
+
+function addItem() {
+  const array = cloneDeep(input.value);
+  array.push(cloneDeep(props.definition?.items?.default) || '');
+  input.value = array;
+}
+
+const componentRefs = ref();
+
+function forceShowError() {
+  if (componentRefs?.value?.forceShowError)
+    componentRefs?.value?.forceShowError();
+  else
+    componentRefs?.value?.forEach((ref: any) => {
+      if (ref?.forceShowError) ref?.forceShowError();
+    });
+}
+
+defineExpose({
+  forceShowError
+});
+
+onMounted(() => {
+  if (props.definition?.title === 'Strategies') return;
+  if (!props.modelValue)
+    input.value = cloneDeep([props.definition?.items?.default] || []);
+});
+</script>
+
+<template>
+  <div v-if="definition?.title === 'Strategies'" />
+
+  <TuneListboxMultiple
+    v-else-if="definition?.items?.anyOf && definition?.items?.type === 'string'"
+    ref="componentRefs"
+    v-model="input"
+    :items="
+      definition.items.anyOf.map((item: any) => ({
+        value: item.const,
+        name: item.title
+      }))
+    "
+    :definition="definition"
+    :error="error"
+  />
+
+  <TuneTextareaArray
+    v-else-if="definition?.items?.type === 'string'"
+    v-model="input"
+    :definition="definition"
+    :error="error"
+  />
+
+  <div v-else-if="definition?.items" class="space-y-2">
+    <TuneLabelInput v-if="definition?.title" :hint="definition?.description">
+      {{ definition?.title }}
+    </TuneLabelInput>
+    <div
+      v-for="(_, i) in input"
+      :key="i"
+      :class="{
+        'tune-form-array-objects': definition?.items?.type === 'object'
+      }"
+    >
+      <div class="mb-2">
+        <TuneTag :label="i + 1" />
+      </div>
+      <component
+        :is="getComponent(definition.items.type)"
+        ref="componentRefs"
+        v-model="input[i]"
+        :definition="definition.items"
+        :error="error"
+      />
+    </div>
+    <TuneButton class="w-full" @click="addItem"> Add </TuneButton>
+  </div>
+</template>
diff --git a/src/components/Tune/_Form/FormBoolean.vue b/src/components/Tune/_Form/FormBoolean.vue
new file mode 100644
index 000000000..1596b96aa
--- /dev/null
+++ b/src/components/Tune/_Form/FormBoolean.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean;
+  definition?: any;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+onMounted(() => {
+  emit(
+    'update:modelValue',
+    props.modelValue || props.definition?.default || false
+  );
+});
+</script>
+
+<template>
+  <TuneSwitch
+    v-bind="props"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
diff --git a/src/components/Tune/_Form/FormNumber.vue b/src/components/Tune/_Form/FormNumber.vue
new file mode 100644
index 000000000..2753209c8
--- /dev/null
+++ b/src/components/Tune/_Form/FormNumber.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    definition: any;
+    error?: string;
+    type?: 'number';
+  }>(),
+  {
+    error: '',
+    type: 'number'
+  }
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+const numberInputRef = ref();
+
+function forceShowError() {
+  numberInputRef?.value?.forceShowError();
+}
+
+defineExpose({
+  forceShowError
+});
+</script>
+
+<template>
+  <TuneInput
+    ref="numberInputRef"
+    v-bind="props"
+    @update:model-value="emit('update:modelValue', Number($event))"
+  />
+</template>
diff --git a/src/components/Tune/_Form/FormString.vue b/src/components/Tune/_Form/FormString.vue
new file mode 100644
index 000000000..e4f892b0d
--- /dev/null
+++ b/src/components/Tune/_Form/FormString.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    definition: any;
+    error?: string;
+  }>(),
+  {
+    error: ''
+  }
+);
+const emit = defineEmits(['update:modelValue']);
+
+const textInputRef = ref();
+
+function forceShowError() {
+  textInputRef?.value?.forceShowError();
+}
+
+defineExpose({
+  forceShowError
+});
+
+const itemsListbox = computed(() => {
+  if (props.definition?.enum) {
+    return props.definition.enum.map((item: any) => ({
+      value: item
+    }));
+  } else if (props.definition?.anyOf) {
+    return props.definition.anyOf.map((item: any) => ({
+      value: item.const,
+      name: item.title
+    }));
+  }
+  return [];
+});
+</script>
+
+<template>
+  <TuneListbox
+    v-if="definition?.enum || definition?.anyOf"
+    ref="textInputRef"
+    :items="itemsListbox"
+    :model-value="modelValue"
+    :definition="definition"
+    :error="error"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+  <TuneTextarea
+    v-else-if="definition?.format === 'long'"
+    ref="textInputRef"
+    v-bind="props"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+  <TuneInput
+    v-else
+    ref="textInputRef"
+    v-bind="props"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
diff --git a/src/components/Ui/Collapsible.vue b/src/components/Ui/UiCollapsible.vue
similarity index 100%
rename from src/components/Ui/Collapsible.vue
rename to src/components/Ui/UiCollapsible.vue
diff --git a/src/components/Ui/CollapsibleContent.vue b/src/components/Ui/UiCollapsibleContent.vue
similarity index 100%
rename from src/components/Ui/CollapsibleContent.vue
rename to src/components/Ui/UiCollapsibleContent.vue
diff --git a/src/components/Ui/CollapsibleText.vue b/src/components/Ui/UiCollapsibleText.vue
similarity index 100%
rename from src/components/Ui/CollapsibleText.vue
rename to src/components/Ui/UiCollapsibleText.vue
diff --git a/src/components/Ui/Input.vue b/src/components/Ui/UiInput.vue
similarity index 100%
rename from src/components/Ui/Input.vue
rename to src/components/Ui/UiInput.vue
diff --git a/src/components/Ui/Select.vue b/src/components/Ui/UiSelect.vue
similarity index 100%
rename from src/components/Ui/Select.vue
rename to src/components/Ui/UiSelect.vue
diff --git a/src/composables/useNetworksFilter.ts b/src/composables/useNetworksFilter.ts
index 664bcefa0..e3242c978 100644
--- a/src/composables/useNetworksFilter.ts
+++ b/src/composables/useNetworksFilter.ts
@@ -30,16 +30,7 @@ export function useNetworksFilter() {
       (a, b) => (a.key === q ? -1 : b.key === q ? 1 : 0)
     );
 
-    const networksArrayTestnetworksLast = networksArrayByExactKeyMatch.sort(
-      (a, b) =>
-        a.name.toLowerCase().includes('testnet')
-          ? 1
-          : b.name.toLowerCase().includes('testnet')
-            ? -1
-            : 0
-    );
-
-    return networksArrayTestnetworksLast;
+    return networksArrayByExactKeyMatch;
   };
 
   const { apolloQuery } = useApolloQuery();
diff --git a/src/composables/useProposalVotes.ts b/src/composables/useProposalVotes.ts
index 60b212278..6ea84d6ac 100644
--- a/src/composables/useProposalVotes.ts
+++ b/src/composables/useProposalVotes.ts
@@ -32,7 +32,7 @@ export function useProposalVotes(proposal: Proposal, loadBy = 6) {
   });
 
   async function _fetchVotes(queryParams: QueryParams, skip = 0) {
-    return apolloQuery(
+    const response = await apolloQuery(
       {
         query: VOTES_QUERY,
         variables: {
@@ -47,10 +47,13 @@ export function useProposalVotes(proposal: Proposal, loadBy = 6) {
       },
       'votes'
     );
+
+    loadProfiles(response.map(vote => vote.voter));
+    return response;
   }
 
   async function _fetchVote(queryParams: QueryParams) {
-    return apolloQuery(
+    const response = await apolloQuery(
       {
         query: VOTES_QUERY,
         variables: {
@@ -60,6 +63,9 @@ export function useProposalVotes(proposal: Proposal, loadBy = 6) {
       },
       'votes'
     );
+
+    loadProfiles(response.map(vote => vote.voter));
+    return response;
   }
 
   function formatProposalVotes(votes: Vote[]) {
@@ -77,7 +83,6 @@ export function useProposalVotes(proposal: Proposal, loadBy = 6) {
     loadingVotes.value = true;
     try {
       const response = await _fetchVotes(filter);
-
       votes.value = formatProposalVotes(response);
     } catch (e) {
       console.log(e);
@@ -107,7 +112,6 @@ export function useProposalVotes(proposal: Proposal, loadBy = 6) {
     loadingMoreVotes.value = true;
     try {
       const response = await _fetchVotes(filter, votes.value.length);
-
       votes.value = votes.value.concat(formatProposalVotes(response));
     } catch (e) {
       console.log(e);
@@ -125,10 +129,6 @@ export function useProposalVotes(proposal: Proposal, loadBy = 6) {
     }
   }
 
-  watch(userPrioritizedVotes, () => {
-    loadProfiles(userPrioritizedVotes.value.map(vote => vote.voter));
-  });
-
   return {
     votes,
     userPrioritizedVotes,
diff --git a/src/composables/useResolveName.ts b/src/composables/useResolveName.ts
index 957dc776b..1d0b8c7e4 100644
--- a/src/composables/useResolveName.ts
+++ b/src/composables/useResolveName.ts
@@ -1,9 +1,7 @@
 import { isAddress } from '@ethersproject/address';
-import { resolveEns, resolveLens } from '@/helpers/utils';
+import { resolveHandle } from '@/helpers/utils';
 
 export function useResolveName() {
-  const { isValidEnsDomain } = useEns();
-
   async function resolveName(value: string): Promise<string | null> {
     let address = value;
 
@@ -11,11 +9,7 @@ export function useResolveName() {
       return address.toLowerCase();
     }
 
-    if (isValidEnsDomain(value)) {
-      address = await resolveEns(value);
-    } else if (value?.endsWith('.lens')) {
-      address = await resolveLens(value);
-    }
+    address = await resolveHandle(value);
 
     return isAddress(address) ? address.toLowerCase() : null;
   }
diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts
index 4ba2a3d4e..6b5de9d8d 100644
--- a/src/helpers/constants.ts
+++ b/src/helpers/constants.ts
@@ -10,3 +10,5 @@ export const SNAPSHOT_BREAKPOINTS = {
   xl: '1280px',
   '2xl': '1536px'
 };
+
+export const KNOWN_HOSTS = ['app.safe.global', 'pilot.gnosisguild.org'];
diff --git a/src/helpers/lensResolver.ts b/src/helpers/lensResolver.ts
deleted file mode 100644
index 57ec415d5..000000000
--- a/src/helpers/lensResolver.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import getProvider from '@snapshot-labs/snapshot.js/src/utils/provider';
-import Multicaller from '@snapshot-labs/snapshot.js/src/utils/multicaller';
-import { getAddress } from '@ethersproject/address';
-import { BigNumber } from '@ethersproject/bignumber';
-
-type Handle = string;
-type Address = string;
-type ProfileId = number;
-
-const network = '137';
-const abi: string[] = [
-  'function balanceOf(address owner) view returns (uint256)',
-  'function tokenOfOwnerByIndex(address owner, uint256 index) view returns (uint256)',
-  'function getHandle(uint256 profileId) view returns (string)'
-];
-const contractAddress = '0xDb46d1Dc155634FbC732f92E853b10B288AD5a1d';
-
-class LensResolver {
-  _multicaller!: Multicaller;
-
-  get multi() {
-    if (!this._multicaller) {
-      const broviderUrl = import.meta.env.VITE_BROVIDER_URL;
-      const provider = getProvider(network, { broviderUrl });
-      this._multicaller = new Multicaller(network, provider, abi);
-    }
-    return this._multicaller;
-  }
-
-  async getAvailableHandleMapping(addresses: Address[]): Promise<Address[]> {
-    if (!addresses.length) return [];
-    addresses.forEach(address => {
-      address = getAddress(address).toString();
-      this.multi.call(address, contractAddress, 'balanceOf', [address]);
-    });
-
-    const balances: Record<Address, BigNumber> = await this.multi.execute();
-    return Object.entries(balances)
-      .map(([addr, bal]): [Address, number] => [addr, bal.toNumber()])
-      .filter(([addr, bal]) => !!bal && addr !== 'undefined')
-      .map(([addr]) => addr);
-  }
-
-  async getTokensMapping(
-    addresses: Address[]
-  ): Promise<[Address, ProfileId][]> {
-    if (!addresses.length) return [];
-    addresses.forEach(address => {
-      address = getAddress(address).toString();
-      this.multi.call(address, contractAddress, 'tokenOfOwnerByIndex', [
-        address,
-        0
-      ]);
-    });
-
-    const tokens: Record<Address, BigNumber> = await this.multi.execute();
-
-    return Object.entries(tokens).map(([address, token]) => [
-      address,
-      token.toNumber()
-    ]);
-  }
-
-  async getHandleMapping(
-    tokenMapping: [Address, ProfileId][]
-  ): Promise<Record<Address, Handle>> {
-    if (!tokenMapping.length) return {};
-    tokenMapping.forEach(([address, token]) => {
-      this.multi.call(address, contractAddress, 'getHandle', [token]);
-    });
-
-    const handles: Record<Address, Handle> = await this.multi.execute();
-
-    return Object.entries(handles)
-      .filter(([address]) => address !== 'undefined')
-      .map(([address, handle]) => [address, handle.toString()])
-      .reduce((acc, [address, handle]) => {
-        acc[address] = handle;
-        return acc;
-      }, {});
-  }
-
-  async resolveAddresses(
-    addresses: Address[]
-  ): Promise<Record<Address, Handle>> {
-    const addressesWithHandles =
-      await this.getAvailableHandleMapping(addresses);
-    const tokenMapping = await this.getTokensMapping(addressesWithHandles);
-    return this.getHandleMapping(tokenMapping);
-  }
-}
-
-export const resolveLensAddresses = async (addresses: Address[]) => {
-  try {
-    const resolver = new LensResolver();
-    return await resolver.resolveAddresses(addresses);
-  } catch (e) {
-    console.log(e);
-    return {};
-  }
-};
diff --git a/src/helpers/queries.ts b/src/helpers/queries.ts
index 2560e80b2..17be5f908 100644
--- a/src/helpers/queries.ts
+++ b/src/helpers/queries.ts
@@ -379,6 +379,7 @@ export const SPACES_RANKING_QUERY = gql`
       items {
         id
         name
+        avatar
         private
         verified
         categories
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
index f07d3cc75..e72e9a3f7 100644
--- a/src/helpers/utils.ts
+++ b/src/helpers/utils.ts
@@ -4,7 +4,6 @@ import { BigNumber } from '@ethersproject/bignumber';
 import networks from '@snapshot-labs/snapshot.js/src/networks.json';
 import voting from '@snapshot-labs/snapshot.js/src/voting';
 import { getUrl } from '@snapshot-labs/snapshot.js/src/utils';
-import getProvider from '@snapshot-labs/snapshot.js/src/utils/provider';
 
 export function shortenAddress(str = '') {
   return `${str.slice(0, 6)}...${str.slice(str.length - 4)}`;
@@ -121,47 +120,19 @@ export async function clearStampCache(id: string, type = 'space') {
     return await fetch(`https://cdn.stamp.fyi/clear/avatar/eth:${id}`);
 }
 
-export async function resolveEns(handle: string) {
+export async function resolveHandle(handle: string) {
   try {
-    const broviderUrl = import.meta.env.VITE_BROVIDER_URL;
-    const provider = getProvider('1', { broviderUrl });
-    const addressResolved = await provider.resolveName(handle);
-    if (!addressResolved) throw new Error('Invalid ENS name');
-    return addressResolved;
-  } catch (error) {
-    console.error('Error in resolveEns:', error);
-    return null;
-  }
-}
-
-export async function resolveLens(handle: string) {
-  try {
-    const response = await fetch('https://api.lens.dev/', {
+    const results = await fetch(import.meta.env.VITE_STAMP_URL, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({
-        query: `
-          query Profiles {
-            profiles(request: { handles: ["${handle}"], limit: 1 }) {
-              items {
-                ownedBy
-              }
-            }
-          }
-        `
-      })
+      body: JSON.stringify({ method: 'resolve_names', params: [handle] })
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error ${response.status}`);
-    }
-
-    const result = await response.json();
-    return result.data?.profiles?.items?.[0]?.ownedBy;
-  } catch (error) {
-    console.error('Error in resolveLens:', error);
+    return (await results.json()).result?.[handle];
+  } catch (e) {
+    console.error('Error resolving handle:', handle, e);
     return null;
   }
 }
@@ -169,16 +140,27 @@ export async function resolveLens(handle: string) {
 export async function lookupAddress(
   addresses: string[]
 ): Promise<Record<string, string>> {
+  if (addresses.length === 0) {
+    return {};
+  }
+
   try {
-    const results = await fetch(import.meta.env.VITE_STAMP_URL, {
+    const response = await fetch(import.meta.env.VITE_STAMP_URL, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ method: 'lookup_addresses', params: addresses })
+      body: JSON.stringify({
+        method: 'lookup_addresses',
+        params: addresses.slice(0, 50)
+      })
     });
 
-    return (await results.json()).result;
+    const results = (await response.json()).result;
+
+    return Object.fromEntries(
+      addresses.map(address => [address, results[address] || ''])
+    );
   } catch (e) {
     console.error('Error resolving addresses:', e);
     return {};
diff --git a/src/helpers/validation.ts b/src/helpers/validation.ts
index 5f72b1612..814bba601 100644
--- a/src/helpers/validation.ts
+++ b/src/helpers/validation.ts
@@ -6,9 +6,11 @@ import { isAddress } from '@ethersproject/address';
 import networks from '@snapshot-labs/snapshot.js/src/networks.json';
 
 const networksIds = Object.keys(networks);
-// const mainnetNetworkIds = Object.keys(networks).filter(
-//   id => !networks[id].testnet
-// );
+const mainnetNetworkIds = Object.keys(networks).filter(
+  id => !networks[id].testnet
+);
+
+const { env } = useApp();
 
 function getErrorMessage(errorObject: ErrorObject): string {
   if (!errorObject.message) return 'Invalid field.';
@@ -85,12 +87,11 @@ export function validateForm(
   ajv.addKeyword({
     keyword: 'snapshotNetwork',
     validate: function (schema, data) {
-      // const snapshotEnv =  'default';
-      // if (snapshotEnv === 'production') return mainnetNetworkIds.includes(data);
+      if (env === 'production') return mainnetNetworkIds.includes(data);
       return networksIds.includes(data);
     },
     error: {
-      message: 'not valid network'
+      message: 'testnet not allowed'
     }
   });
 
@@ -131,6 +132,7 @@ function transformAjvErrors(ajv: Ajv): ValidationErrorOutput {
         output,
         path
       );
+
       targetObject[path[path.length - 1]] = getErrorMessage(error);
       return output;
     },
diff --git a/src/helpers/vitePlugins.ts b/src/helpers/vitePlugins.ts
new file mode 100644
index 000000000..85d582e22
--- /dev/null
+++ b/src/helpers/vitePlugins.ts
@@ -0,0 +1,51 @@
+import vue from '@vitejs/plugin-vue';
+import ViteComponents from 'unplugin-vue-components/vite';
+import visualizer from 'rollup-plugin-visualizer';
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import { sentryVitePlugin } from '@sentry/vite-plugin';
+import AutoImport from 'unplugin-auto-import/vite';
+
+export const getPlugins = () => [
+  vue({ reactivityTransform: true }),
+  AutoImport({
+    dts: true,
+    imports: ['vue', 'vue-router'],
+    dirs: ['./src/composables'],
+    eslintrc: {
+      enabled: true
+    }
+  }),
+  ViteComponents({
+    globs: ['src/components/**/*.vue', '!src/components/Tune/_Form/*.vue'],
+    resolvers: [
+      IconsResolver({
+        customCollections: ['s'],
+        alias: {
+          ho: 'heroicons-outline'
+        }
+      })
+    ]
+  }),
+  visualizer({
+    filename: './dist/stats.html',
+    template: 'sunburst',
+    gzipSize: true
+  }),
+  Icons({
+    compiler: 'vue3',
+    customCollections: {
+      s: FileSystemIconLoader('./src/assets/icons', svg =>
+        svg.replace(/^<svg /, '<svg fill="currentColor" ')
+      )
+    }
+  }),
+  // ATTENTION: Keep the Sentry plugin last
+  sentryVitePlugin({
+    org: process.env.SENTRY_ORG,
+    project: 'snapshot',
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    disable: process.env.VITE_ENV !== 'production'
+  })
+];
diff --git a/src/main.ts b/src/main.ts
index 277de704b..9422418f6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,26 +1,22 @@
 import { Buffer } from 'buffer';
 (window as any).global = window;
 (window as any).Buffer = Buffer;
+
 import { LockPlugin } from '@snapshot-labs/lock/plugins/vue3';
-import options from '@/helpers/auth';
-import '../snapshot-spaces/skins';
-import App from '@/App.vue';
-import router from '@/router';
-import i18n from '@/helpers/i18n';
-import '@/helpers/auth';
-import '@snapshot-labs/tune/dist/style.css';
-import '@/style.scss';
-import { apolloClient } from '@/helpers/apollo';
 import { DefaultApolloClient } from '@vue/apollo-composable';
-import VueTippy from 'vue-tippy';
 import { createHead } from '@vueuse/head';
-import 'viewerjs/dist/viewer.css';
+import options from '@/helpers/auth';
+import VueTippy from 'vue-tippy';
 import VueViewer from 'v-viewer';
+import { apolloClient } from '@/helpers/apollo';
 import { initSentry } from '@/sentry';
+import { KNOWN_HOSTS } from '@/helpers/constants';
+import i18n from '@/helpers/i18n';
+import router from '@/router';
+import '../snapshot-spaces/skins';
+import '@/assets/css/main.scss';
+import App from '@/App.vue';
 
-const head = createHead();
-
-const knownHosts = ['app.safe.global', 'pilot.gnosisguild.org'];
 const parentUrl =
   window.location != window.parent.location
     ? document.referrer ||
@@ -29,11 +25,13 @@ const parentUrl =
       ]
     : document.location.href;
 const parentHost = new URL(parentUrl).host;
-if (window !== window.parent && !knownHosts.includes(parentHost)) {
+if (window !== window.parent && !KNOWN_HOSTS.includes(parentHost)) {
   document.documentElement.style.display = 'none';
   throw new Error(`Unknown host: ${parentHost}`);
 }
 
+const head = createHead();
+
 const app = createApp({
   setup() {
     provide(DefaultApolloClient, apolloClient);
diff --git a/src/router.ts b/src/router/index.ts
similarity index 96%
rename from src/router.ts
rename to src/router/index.ts
index 0f33d7dfc..f94f00a34 100644
--- a/src/router.ts
+++ b/src/router/index.ts
@@ -19,9 +19,9 @@ import SpaceProposal from '@/views/SpaceProposal.vue';
 import SpaceCreate from '@/views/SpaceCreate.vue';
 import SpaceSettings from '@/views/SpaceSettings.vue';
 import SpaceAbout from '@/views/SpaceAbout.vue';
-import SpaceTreasury from './views/SpaceTreasury.vue';
-import SpaceDelegates from './views/SpaceDelegates.vue';
-import SpaceDelegate from './views/SpaceDelegate.vue';
+import SpaceTreasury from '@/views/SpaceTreasury.vue';
+import SpaceDelegates from '@/views/SpaceDelegates.vue';
+import SpaceDelegate from '@/views/SpaceDelegate.vue';
 
 // The frontend shows all spaces or just a single one, when being accessed
 // through that space's custom domain.
diff --git a/src/vars.scss b/src/vars.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/views/ExploreView.vue b/src/views/ExploreView.vue
index 965e88051..84ec2f6b9 100644
--- a/src/views/ExploreView.vue
+++ b/src/views/ExploreView.vue
@@ -50,11 +50,14 @@ const { filterPlugins, getPluginsSpacesCount, loadingPluginsSpacesCount } =
 
 const { filterStrategies, getStrategies, isLoadingStrategies } =
   useStrategies();
+const { env } = useApp();
+
+const onlyMainnetNetworks = n => (env === 'production' ? !n.testnet : true);
 
 const items = computed(() => {
   const q = route.query.q || '';
   if (isStrategies.value) return filterStrategies(q);
-  if (isNetworks.value) return filterNetworks(q);
+  if (isNetworks.value) return filterNetworks(q).filter(onlyMainnetNetworks);
   if (isPlugins.value) return filterPlugins(q);
   return [];
 });
diff --git a/src/views/SpaceSettings.vue b/src/views/SpaceSettings.vue
index e7e3c75b8..d4c6d8255 100644
--- a/src/views/SpaceSettings.vue
+++ b/src/views/SpaceSettings.vue
@@ -113,7 +113,7 @@ const settingsPages = computed(() => [
 async function handleDelete() {
   modalDeleteSpaceConfirmation.value = '';
 
-  const result = await send(props.space, 'delete-space', null);
+  const result = await send(props.space, 'delete-space', {});
   console.log(':handleDelete result', result);
 
   if (result && result.id) {
@@ -289,6 +289,7 @@ onBeforeRouteLeave(async () => {
               context="settings"
               :space="space"
               :is-view-only="isViewOnly"
+              :error="validationErrors.treasuries"
             />
             <SettingsSubSpacesBlock
               context="settings"
diff --git a/tailwind.config.js b/tailwind.config.js
index 5b191c879..ac51f8850 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
     extend: {
       colors: {
         snapshot: '#f3b04e',
-        primary: 'var(--primary-color)',
+        'skin-primary': 'var(--primary-color)',
         'skin-border': 'var(--border-color)',
         'skin-text': 'var(--text-color)',
         'skin-link': 'var(--link-color)',
diff --git a/vite.config.ts b/vite.config.ts
index 822a2abda..f51b77c11 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,66 +1,13 @@
 /// <reference types="vitest" />
 import path from 'path';
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import ViteComponents from 'unplugin-vue-components/vite';
-import visualizer from 'rollup-plugin-visualizer';
-import Icons from 'unplugin-icons/vite';
-import IconsResolver from 'unplugin-icons/resolver';
-import { FileSystemIconLoader } from 'unplugin-icons/loaders';
-import { sentryVitePlugin } from '@sentry/vite-plugin';
-import AutoImport from 'unplugin-auto-import/vite';
+import { defineConfig } from 'vitest/config';
+import { getPlugins } from './src/helpers/vitePlugins';
 
 export default defineConfig({
   define: {
     'process.env': process.env
   },
-  plugins: [
-    vue({ reactivityTransform: true }),
-    AutoImport({
-      dts: true,
-      imports: ['vue', 'vue-router'],
-      dirs: ['./src/composables'],
-      eslintrc: {
-        enabled: true
-      }
-    }),
-    ViteComponents({
-      directoryAsNamespace: true,
-      resolvers: [
-        IconsResolver({
-          customCollections: ['s'],
-          alias: {
-            ho: 'heroicons-outline'
-          }
-        }),
-        componentName => {
-          if (componentName.startsWith('Tune'))
-            return { name: componentName, from: '@snapshot-labs/tune' };
-        }
-      ]
-    }),
-    visualizer({
-      filename: './dist/stats.html',
-      template: 'sunburst',
-      gzipSize: true
-    }),
-    Icons({
-      compiler: 'vue3',
-      customCollections: {
-        // key as the collection name
-        s: FileSystemIconLoader('./src/assets/icons', svg =>
-          svg.replace(/^<svg /, '<svg fill="currentColor" ')
-        )
-      }
-    }),
-    // Put the Sentry vite plugin after all other plugins
-    sentryVitePlugin({
-      org: process.env.SENTRY_ORG,
-      project: 'snapshot',
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      disable: process.env.VITE_ENV !== 'production'
-    })
-  ],
+  plugins: getPlugins(),
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
@@ -69,26 +16,17 @@ export default defineConfig({
   },
   test: {
     environment: 'happy-dom',
-    coverage: {
-      all: true
-    },
     deps: {
       inline: ['@pusher/push-notifications-web']
     }
   },
   build: {
     sourcemap: process.env.VITE_ENV === 'production',
-    target: 'esnext' // you can also use 'es2020' here
+    target: 'esnext'
   },
   optimizeDeps: {
     esbuildOptions: {
       target: 'esnext'
-    },
-    exclude: ['@snapshot-labs/tune']
-  },
-  server: {
-    watch: {
-      ignored: ['!**/node_modules/@snapshot-labs/tune/**']
     }
   }
 });
diff --git a/yarn.lock b/yarn.lock
index c1027d5c2..edf5b8096 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,11 +12,6 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.9.0.tgz#223572538f6bea336750039bb43a4016dcc8182d"
   integrity sha512-iowxq3U30sghZotgl4s/oJRci6WPBfNO5YYgk2cIOMCHr3LeGPcsZjCEr+33Q4N+oV3OABDAtA+pyvWjbvBifQ==
 
-"@adraffy/ens-normalize@^1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
-  integrity sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==
-
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -679,14 +674,14 @@
     "@ethersproject/properties" "^5.7.0"
     "@ethersproject/strings" "^5.7.0"
 
-"@floating-ui/core@^1.0.0", "@floating-ui/core@^1.3.0", "@floating-ui/core@^1.4.2":
+"@floating-ui/core@^1.3.0", "@floating-ui/core@^1.4.2":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
   integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.2.1", "@floating-ui/dom@^1.3.0", "@floating-ui/dom@^1.4.5":
+"@floating-ui/dom@^1.3.0", "@floating-ui/dom@^1.4.5":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
   integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
@@ -699,14 +694,6 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
-"@floating-ui/vue@^0.2.0":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-0.2.1.tgz#a52b66e020897ad0535d0d0d3b09932446fc6231"
-  integrity sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ==
-  dependencies:
-    "@floating-ui/dom" "^1.2.1"
-    vue-demi "^0.13.11"
-
 "@floating-ui/vue@^1.0.0":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.2.tgz#ebd704843c2f3b780c1ce6652a7245873278563f"
@@ -732,15 +719,6 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@headlessui-float/vue@^0.11.0":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@headlessui-float/vue/-/vue-0.11.3.tgz#681a919943d7342e3560ef75d61311be958d3c1b"
-  integrity sha512-pGljsWtpDbwVK3JtWC78nG8rNnGQMXbB0obIEKM+XfrMSxv94ZoAJm6Too/baJTxqtxSXbR4I2YPgLY3sEkTDg==
-  dependencies:
-    "@floating-ui/core" "^1.0.0"
-    "@floating-ui/dom" "^1.0.0"
-    "@floating-ui/vue" "^0.2.0"
-
 "@headlessui-float/vue@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@headlessui-float/vue/-/vue-0.12.0.tgz#315abf12d87545fb0328db413f4462bee33651a3"
@@ -750,7 +728,7 @@
     "@floating-ui/dom" "^1.3.0"
     "@floating-ui/vue" "^1.0.0"
 
-"@headlessui/vue@^1.7.12", "@headlessui/vue@^1.7.16":
+"@headlessui/vue@^1.7.16":
   version "1.7.16"
   resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.16.tgz#bdc9d32d329248910325539b99e6abfce0c69f89"
   integrity sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==
@@ -1320,10 +1298,10 @@
   dependencies:
     ofetch "^1.3.3"
 
-"@snapshot-labs/snapshot.js@^0.9.2":
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@snapshot-labs/snapshot.js/-/snapshot.js-0.9.2.tgz#1d4ab0046c342c259b7409f030a46aeddf65becd"
-  integrity sha512-kdZvBZ4nLFwY7ONpM9ad7+VpLvo091ogq/eeDxoUpDQ9F+z2RiH/xNi4wxdNBGtAPT1cn2Pv3StbjoYrdUnvxw==
+"@snapshot-labs/snapshot.js@^0.9.5":
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/@snapshot-labs/snapshot.js/-/snapshot.js-0.9.5.tgz#2fe0f12b0d913d43121a2fb23e99ac160a3cd41f"
+  integrity sha512-+Vqn+kms+Yw2pa87cSSp0aIKoJim6wiuUVxl0DIZ2e4yWe8YGZGbJuLXMgozZhwMRVtjW3QX9sHE7lyI1cjMpg==
   dependencies:
     "@ensdomains/eth-ens-namehash" "^2.0.15"
     "@ethersproject/abi" "^5.6.4"
@@ -1340,20 +1318,6 @@
     json-to-graphql-query "^2.2.4"
     lodash.set "^4.3.2"
 
-"@snapshot-labs/tune@^0.1.34":
-  version "0.1.34"
-  resolved "https://registry.yarnpkg.com/@snapshot-labs/tune/-/tune-0.1.34.tgz#8a4d8fbb4d70ae6d411f4867c6345becc440f38f"
-  integrity sha512-NoT8kw4AQUD25xkDS/3f17s3s02gGkdiMT2Qadjp6m+FtiMS8BYbI89+DbQrI3uYc6EdiM2QjWUaXHc7LRPT3Q==
-  dependencies:
-    "@headlessui-float/vue" "^0.11.0"
-    "@headlessui/vue" "^1.7.12"
-    "@vueuse/core" "^10.1.2"
-    lodash "^4.17.21"
-    minisearch "^6.0.1"
-    sass "^1.60.0"
-    vue "^3.2.47"
-    vue-tippy "^6.0.0"
-
 "@solana/buffer-layout@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@solana/buffer-layout/-/buffer-layout-4.0.1.tgz#b996235eaec15b1e0b5092a8ed6028df77fa6c15"
@@ -2024,7 +1988,7 @@
     js-beautify "1.14.9"
     vue-component-type-helpers "1.8.4"
 
-"@vueuse/core@^10.1.2", "@vueuse/core@^10.6.1":
+"@vueuse/core@^10.6.1":
   version "10.6.1"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.6.1.tgz#5b16d8238054c6983b6cb7cd77a78035f098dd89"
   integrity sha512-Pc26IJbqgC9VG1u6VY/xrXXfxD33hnvxBnKrLlA2LJlyHII+BSrRoTPJgGYq7qZOu61itITFUnm6QbacwZ4H8Q==
@@ -5534,10 +5498,10 @@ minipass@^4.2.4:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.2.tgz#58a82b7d81c7010da5bd4b2c0c85ac4b4ec5131e"
   integrity sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==
 
-minisearch@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/minisearch/-/minisearch-6.1.0.tgz#6e74e743dbd0e88fa5ca52fef2391e0aa7055252"
-  integrity sha512-PNxA/X8pWk+TiqPbsoIYH0GQ5Di7m6326/lwU/S4mlo4wGQddIcf/V//1f9TB0V4j59b57b+HZxt8h3iMROGvg==
+minisearch@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/minisearch/-/minisearch-6.2.0.tgz#310b50508551f22e10815f5baedeeeded03a6b5d"
+  integrity sha512-BECkorDF1TY2rGKt9XHdSeP9TP29yUbrAaCh/C03wpyf1vx3uYcP/+8XlMcpTkgoU0rBVnHMAOaP83Rc9Tm+TQ==
 
 mixpanel-browser@^2.48.1:
   version "2.48.1"
@@ -6636,7 +6600,7 @@ sass-loader@^13.2.2:
     klona "^2.0.6"
     neo-async "^2.6.2"
 
-sass@^1.60.0, sass@~1.62.1:
+sass@~1.62.1:
   version "1.62.1"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.62.1.tgz#caa8d6bf098935bc92fc73fa169fb3790cacd029"
   integrity sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==
@@ -7573,11 +7537,6 @@ vue-demi@>=0.13.0, vue-demi@>=0.14.6, vue-demi@^0.14.6:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
   integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
 
-vue-demi@^0.13.11:
-  version "0.13.11"
-  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
-  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
-
 vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -7620,14 +7579,14 @@ vue-router@^4.2.5:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
-vue-tippy@^6.0.0, vue-tippy@^6.3.1:
+vue-tippy@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/vue-tippy/-/vue-tippy-6.3.1.tgz#8d0e03294dad862d71f3a90e486721720cff832c"
   integrity sha512-U2jpGwmwg+u/a36/XDnGlOF+W944xHGlVELsrTNWmZ0nUi2E/VW0c/buBkzntFUwRh6BHwFWcKL8BHcyG2mogQ==
   dependencies:
     tippy.js "^6.3.7"
 
-vue@^3.2.47, vue@^3.3.8:
+vue@^3.3.8:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.8.tgz#532ff071af24f6a69e5ecc53a66858a9ee874ffc"
   integrity sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==