diff --git a/package-lock.json b/package-lock.json
index 708799b..26509f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,17 @@
       "name": "pretty-metamask",
       "version": "0.0.0",
       "dependencies": {
-        "@abimate/openzeppelin": "^0.0.5",
         "@abimate/solmate": "^0.0.9",
         "@fortawesome/vue-fontawesome": "^3.0.8",
         "@headlessui/vue": "^1.7.22",
+        "@openzeppelin/contracts": "^5.0.2",
         "@scure/bip32": "^1.4.0",
         "@scure/bip39": "^1.3.0",
         "axios": "^1.7.2",
         "crypto-ts": "^1.0.2",
         "viem": "^2.14.2",
-        "vue": "^3.4.21"
+        "vue": "^3.4.21",
+        "vuex": "^4.1.0"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.8.0",
@@ -28,6 +29,7 @@
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.19",
+        "daisyui": "^4.12.10",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
         "npm-run-all2": "^6.1.2",
@@ -39,14 +41,6 @@
         "vue-tsc": "^2.0.11"
       }
     },
-    "node_modules/@abimate/openzeppelin": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@abimate/openzeppelin/-/openzeppelin-0.0.5.tgz",
-      "integrity": "sha512-ta5KPl4osHmVr81lcNUzIzzc915DDvDNRxMiyRUHag1QAKJW3yqWAttpZa6H8iGBlFuzAfVw6ftYenV9HL4zCw==",
-      "peerDependencies": {
-        "tslib": "^2.3.0"
-      }
-    },
     "node_modules/@abimate/solmate": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/@abimate/solmate/-/solmate-0.0.9.tgz",
@@ -442,6 +436,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@openzeppelin/contracts": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@openzeppelin/contracts/-/contracts-5.0.2.tgz",
+      "integrity": "sha512-ytPc6eLGcHHnapAZ9S+5qsdomhjo6QBHTDRRBFfTxXIpsicMhVPouPgmUPebZZZGX7vt9USA+Z+0M0dSVtSUEA==",
+      "license": "MIT"
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -904,6 +904,12 @@
         "@vue/shared": "3.4.33"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
+      "license": "MIT"
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
@@ -1496,6 +1502,17 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "license": "0BSD"
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1515,6 +1532,36 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/daisyui": {
+      "version": "4.12.10",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz",
+      "integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -1972,6 +2019,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -4128,6 +4182,18 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index eb113d9..554bf46 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "axios": "^1.7.2",
     "crypto-ts": "^1.0.2",
     "viem": "^2.14.2",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
@@ -33,6 +34,7 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
+    "daisyui": "^4.12.10",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "npm-run-all2": "^6.1.2",
diff --git a/src/components/main/ERC/NFT/NFT.vue b/src/components/main/ERC/NFT/NFT.vue
index 7059b02..1b092e6 100644
--- a/src/components/main/ERC/NFT/NFT.vue
+++ b/src/components/main/ERC/NFT/NFT.vue
@@ -1,27 +1,34 @@
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue'
-  import AddDialog from '@/components/main/ERC/NFT/add/AddDialog.vue'
-  import AddBtn from '@/components/main/ERC/NFT/add/AddBtn.vue'
-  import NFTCard from '@/components/main/ERC/NFT/NFTCard.vue'
-  import { getNFTsForOwner } from '@/getNFTsForOwner'
-  import { account } from '@/main'
+import { onMounted, ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import AddDialog from '@/components/main/ERC/NFT/add/AddDialog.vue';
+import AddBtn from '@/components/main/ERC/NFT/add/AddBtn.vue';
+import NFTCard from '@/components/main/ERC/NFT/NFTCard.vue';
+import { getNFTsForOwner } from '@/getNFTsForOwner';
 
-  const dialogVisible = ref(false)
-  const NFTsList = ref()
-  let importedNFTs = window.localStorage.getItem('ImportedNFTs')
-  onMounted(async () => {
-    NFTsList.value = await getNFTsForOwner(account, "eth-mainnet");
-    if (importedNFTs) {
-      importedNFTs = JSON.parse(importedNFTs)
-    }
-  })
+const store = useStore();
+const account = computed(() => store.getters.selectedAccount);
+
+const dialogVisible = ref(false);
+const NFTsList = ref([]);
+let importedNFTs = window.localStorage.getItem('ImportedNFTs');
+
+onMounted(async () => {
+  if (account.value) {
+    NFTsList.value = await getNFTsForOwner(account.value, "eth-mainnet");
+  }
+
+  if (importedNFTs) {
+    importedNFTs = JSON.parse(importedNFTs);
+  }
+});
 </script>
 
 <template>
   <div id="container">
-   <div v-for="NFT in NFTsList" :key="NFT.id">
-     <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT"/>
-   </div>
+    <div v-for="NFT in NFTsList" :key="NFT.id">
+      <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT"/>
+    </div>
     <div v-for="NFT in importedNFTs" :key="NFT.id">
       <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT"/>
     </div>
diff --git a/src/components/main/ERC/token/Token.vue b/src/components/main/ERC/token/Token.vue
index cf645c7..ea3230b 100644
--- a/src/components/main/ERC/token/Token.vue
+++ b/src/components/main/ERC/token/Token.vue
@@ -11,6 +11,8 @@ export default defineComponent({
   <div id="container"></div>
 </template>
 
+
+
 <style scoped>
   #container {
     margin-top: 3.9vh;
diff --git a/src/components/main/user-info/UserInfos.vue b/src/components/main/user-info/UserInfos.vue
index 81d60fe..f53832c 100644
--- a/src/components/main/user-info/UserInfos.vue
+++ b/src/components/main/user-info/UserInfos.vue
@@ -1,10 +1,20 @@
 <script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue';
+import { useStore } from 'vuex';
 import { getBalance } from '@/getBalance';
-import { exchangeRates } from '@/exchangeRates'
-import { account } from '@/main'
+import { exchangeRates } from '@/exchangeRates';
 
-const balance = await getBalance(account).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)))
-const ETH = await exchangeRates('ETH').then((res: any) => res.data.rates.USD)
+const store = useStore();
+const account = computed(() => store.getters.selectedAccount);
+const balance = ref<number | null>(null);
+const ETH = ref<number | null>(null);
+
+ETH.value = await exchangeRates('ETH').then((res: any) => res.data.rates.USD);
+watchEffect(async () => {
+  if (account.value) {
+    balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
+  }
+});
 </script>
 
 <template>
@@ -12,14 +22,14 @@ const ETH = await exchangeRates('ETH').then((res: any) => res.data.rates.USD)
     <div id="token">
       <img src="../../../assets/eth_logo.png" alt="ETH" id="eth-logo"/>
       <div id="balance">
-        <h1>{{ balance.toFixed(4) }} ETH</h1>
-        <p>${{ (balance.toFixed(4) * ETH).toFixed(2) }} USD</p>
+        <h1 v-if="balance !== null">{{ balance.toFixed(4) }} ETH</h1>
+        <p v-if="balance !== null && ETH !== null">${{ (balance.toFixed(4) * ETH).toFixed(2) }} USD</p>
       </div>
     </div>
     <div id="exchange">
       <h2>1 ETH</h2>
       <img src="../../../assets/arrow.svg" alt="arrow" id="arrow"/>
-      <h2>{{ ETH }} USD</h2>
+      <h2 v-if="ETH !== null">{{ ETH }} USD</h2>
     </div>
   </div>
 </template>
diff --git a/src/components/main/user-info/UserProfile.vue b/src/components/main/user-info/UserProfile.vue
index 7a92b0f..2b944a1 100644
--- a/src/components/main/user-info/UserProfile.vue
+++ b/src/components/main/user-info/UserProfile.vue
@@ -1,16 +1,26 @@
 <script setup lang="ts">
-  import Dots3Icon from "../../../assets/3DotsIcon.svg"
-  import TooltipCopy from './TooltipCopy.vue'
-  import { account } from '@/main'
+import Dots3Icon from "../../../assets/3DotsIcon.svg"
+import TooltipCopy from './TooltipCopy.vue'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+const selectedAccount = computed(() => store.getters.selectedAccount)
+const reducedAddress = computed(() => {
+  return selectedAccount.value ? `${selectedAccount.value.slice(0, 7)}...${selectedAccount.value.slice(-5)}` : null;
+});
 </script>
 
 <template>
   <div id="container">
     <div>
       <h1 id="name">Main Account</h1>
-      <div id="address">
-        <p>{{ account.slice(0, 18) }}</p>
-        <TooltipCopy :address="account"/>
+      <div id="address" v-if="selectedAccount">
+        <p>{{ reducedAddress }}</p>
+        <TooltipCopy :address="selectedAccount"/> <!-- Adresse complète passée pour la copie -->
+      </div>
+      <div v-else>
+        <p>No account selected</p>
       </div>
     </div>
     <img :src="Dots3Icon" alt="icon" />
@@ -19,40 +29,40 @@
 </template>
 
 <style scoped>
-  #container {
-    padding-inline: 42px;
-    padding-block: 32px;
-    display: flex;
-    height: 11vh;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  #name {
-    color: white;
-  }
-  #address {
-    display: flex;
-    flex-direction: row;
-  }
-  h1 {
-    font-size: 27px;
-  }
-  p {
-    color: #808080;
-    font-size: 13px;
-    margin-right: 11px;
-  }
-  img {
-    height: 18px;
-    width: 18px;
-  }
-  img:hover {
-    cursor: pointer;
-  }
-  #bottomLine {
-    width: 100%;
-    height: 1px;
-    background-color: #4E4E4E;
-  }
-</style>
\ No newline at end of file
+#container {
+  padding-inline: 42px;
+  padding-block: 32px;
+  display: flex;
+  height: 11vh;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+#name {
+  color: white;
+}
+#address {
+  display: flex;
+  flex-direction: row;
+}
+h1 {
+  font-size: 27px;
+}
+p {
+  color: #808080;
+  font-size: 13px;
+  margin-right: 11px;
+}
+img {
+  height: 18px;
+  width: 18px;
+}
+img:hover {
+  cursor: pointer;
+}
+#bottomLine {
+  width: 100%;
+  height: 1px;
+  background-color: #4E4E4E;
+}
+</style>
diff --git a/src/components/transaction/transaction.vue b/src/components/transaction/transaction.vue
index 40f21e7..a0c0628 100644
--- a/src/components/transaction/transaction.vue
+++ b/src/components/transaction/transaction.vue
@@ -1,174 +1,176 @@
-
 <template>
-    <div class="box" @click="openPopup()">
-        <div class="icone">
-            <svg style="fill: #D72F2F" v-if="fromMe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 160c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32s-32-14.3-32-32V205.3L342.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L192 269.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0L320 306.7 466.7 160H384z"/></svg>
-            <svg style="fill: #33BF41" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 352c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32s-32 14.3-32 32v82.7L342.6 137.4c-12.5-12.5-32.8-12.5-45.3 0L192 242.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0L320 205.3 466.7 352H384z"/></svg>
-        </div>
-        <div class="info">
-            <h4 v-if="fromMe">
-                <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
-                    Sent > 0.0000000001 {{ transInfos.devise }}
-                </template>
-                <template v-else>
-                    Sent {{ transInfos.value }} {{ transInfos.devise }}
-                </template></h4>
-            <h4 v-else>
-                <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
-                    Received > 0.0000000001 {{ transInfos.devise }}
-                </template>
-                <template v-else>
-                    Received {{ transInfos.value }} {{ transInfos.devise }}
-                </template>
-            </h4>
-            <h5 v-if="fromMe">{{ transInfos.date }} to {{ reduceHashSize(transInfos.to) }}</h5>
-            <h5 v-else>{{ transInfos.date }} from {{ reduceHashSize(transInfos.from) }}</h5>
-        </div>
-        <div class="status">
-            <h5>Status</h5>
-            <svg style="fill: #33BF41" v-if="transInfos.status == 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-            <svg style="fill: #D72F2F" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
-        </div>
+  <div class="box" @click="openPopup()">
+    <div class="icone">
+      <svg style="fill: #D72F2F" v-if="fromMe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 160c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32V288c0 17.7-14.3 32-32 32s-32-14.3-32-32V205.3L342.6 374.6c-12.5 12.5-32.8 12.5-45.3 0L192 269.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160c12.5-12.5 32.8-12.5 45.3 0L320 306.7 466.7 160H384z"/></svg>
+      <svg style="fill: #33BF41" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 352c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32s-32 14.3-32 32v82.7L342.6 137.4c-12.5-12.5-32.8-12.5-45.3 0L192 242.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0L320 205.3 466.7 352H384z"/></svg>
+    </div>
+    <div class="info">
+      <h4 v-if="fromMe">
+        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
+          Sent > 0.0000000001 {{ transInfos.devise }}
+        </template>
+        <template v-else>
+          Sent {{ transInfos.value }} {{ transInfos.devise }}
+        </template></h4>
+      <h4 v-else>
+        <template v-if="Number(transInfos.value) < 0.0000000001 && Number(transInfos.value) != 0">
+          Received > 0.0000000001 {{ transInfos.devise }}
+        </template>
+        <template v-else>
+          Received {{ transInfos.value }} {{ transInfos.devise }}
+        </template>
+      </h4>
+      <h5 v-if="fromMe">{{ transInfos.date }} to {{ reduceHashSize(transInfos.to) }}</h5>
+      <h5 v-else>{{ transInfos.date }} from {{ reduceHashSize(transInfos.from) }}</h5>
+    </div>
+    <div class="status">
+      <h5>Status</h5>
+      <svg style="fill: #33BF41" v-if="transInfos.status == 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+      <svg style="fill: #D72F2F" v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
     </div>
-    <transactionInfos v-if="popUp == true" :data="transInfos" @close-popUp="popUp = false" />
+  </div>
+  <transactionInfos v-if="popUp == true" :data="transInfos" @close-popUp="popUp = false" />
 </template>
 
 <script setup lang="ts">
-import { account, pubClient, x } from '../../main';
-import { ref, onMounted } from 'vue';
-import { formatEther, getContract } from 'viem'
+import { ref, onMounted, computed } from 'vue';
+import { useStore } from 'vuex';
+import { formatEther, getContract } from 'viem';
 import ERC20 from '@openzeppelin/contracts/build/contracts/ERC20.json';
 import transactionInfos from './transactionInfos.vue';
 
 const props = defineProps({
-    hash: String,
-    devise: String,
-    from: Boolean
-})
+  hash: String,
+  devise: String,
+  from: Boolean
+});
 
-const popUp = ref(false)
-const fromMe = ref(props.from)
+const store = useStore();
+const account = computed(() => store.getters.selectedAccount);
+const popUp = ref(false);
+const fromMe = ref(props.from);
 
 interface Transaction {
-    hash: string,
-    to: string,
-    from: string,
-    blockHash: string,
-    blockNumber: number,
-    value: string,
-    status: string,
-    timestamp: number,
-    date: string,
-    devise: string,
-    logs: {
-        transaction: any,
-        receipt: any,
-        erc20: any,
-    }
+  hash: string,
+  to: string,
+  from: string,
+  blockHash: string,
+  blockNumber: number,
+  value: string,
+  status: string,
+  timestamp: number,
+  date: string,
+  devise: string,
+  logs: {
+    transaction: any,
+    receipt: any,
+    erc20: any,
+  }
 }
 
 const transInfos = ref(<Transaction>{
-    hash: "",
-    to: "",
-    from: "",
-    blockHash: "",
-    blockNumber: 0,
-    value: "",
-    status: "",
-    timestamp: 0,
-    date: "",
-    devise: props.devise,
-    logs: {
-        transaction: {},
-        receipt: {},
-        erc20: {},
-    }
-})
+  hash: "",
+  to: "",
+  from: "",
+  blockHash: "",
+  blockNumber: 0,
+  value: "",
+  status: "",
+  timestamp: 0,
+  date: "",
+  devise: props.devise,
+  logs: {
+    transaction: {},
+    receipt: {},
+    erc20: {},
+  }
+});
 
 const reduceHashSize = (hash: string) => {
-    if (hash == account.toLowerCase())
-        return "Me"
-    return `${hash.slice(0, 6)}...${hash.slice(-4)}`
-}
+  if (hash == account.value?.toLowerCase())
+    return "Me";
+  return `${hash.slice(0, 6)}...${hash.slice(-4)}`;
+};
 
 const openPopup = () => {
-    popUp.value = true
-}
+  popUp.value = true;
+};
 
 const getDateFormated = (timestamp: number) => {
-    let date = new Date(timestamp * 1000);
-    let options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
-    let formattedDate = date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions);
-    return formattedDate
-}
+  const date = new Date(timestamp * 1000);
+  const options = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+  return date.toLocaleString('en-US', options as Intl.DateTimeFormatOptions);
+};
 
 const getInfos = () => {
-    getTransactionInfos(props.hash as `0x${string}`)
-}
+  if (account.value) {
+    getTransactionInfos(props.hash as `0x${string}`);
+  }
+};
 
 const getErc20Infos = async (transactionInfos: any, transactionReceipt: any, transInfos: any) => {
-    try {
-        const token = getContract({
-            address: transactionReceipt.logs[0].address,
-            abi: ERC20,
-            client: pubClient
-        })
-        transInfos.value.devise = await token.read.symbol()
-        const logs = await pubClient.getContractEvents({
-            abi: ERC20,
-            address: transactionReceipt.logs[0].address,
-            fromBlock: transactionInfos.blockNumber,
-            toBlock: transactionInfos.blockNumber,
-            eventName: "Transfer"
-        })
-        transInfos.value.from = logs[0].args.from
-        transInfos.value.to = logs[0].args.to
-        transInfos.value.value = formatEther(logs[0].args.value as bigint)
-        transInfos.value.logs.erc20 = logs
-    } catch (error) {
-        console.log(error)
-    }
-}
+  try {
+    const token = getContract({
+      address: transactionReceipt.logs[0].address,
+      abi: ERC20,
+      client: pubClient
+    });
+    transInfos.value.devise = await token.read.symbol();
+    const logs = await pubClient.getContractEvents({
+      abi: ERC20,
+      address: transactionReceipt.logs[0].address,
+      fromBlock: transactionInfos.blockNumber,
+      toBlock: transactionInfos.blockNumber,
+      eventName: "Transfer"
+    });
+    transInfos.value.from = logs[0].args.from;
+    transInfos.value.to = logs[0].args.to;
+    transInfos.value.value = formatEther(logs[0].args.value as bigint);
+    transInfos.value.logs.erc20 = logs;
+  } catch (error) {
+    console.log(error);
+  }
+};
 
 const getTransactionInfos = async (transactionHash: `0x${string}`) => {
-    const transactionInfos = await pubClient.getTransaction({
-        hash: transactionHash
-    })
-    let data = {
-        "id": 1,
-        "jsonrpc": "2.0",
-        "method": "eth_getBlockByHash",
-        "params": [
-            transactionInfos.blockHash,
-            false
-        ]
-    }
-    const transactionReceipt = await pubClient.getTransactionReceipt({
-        hash: transactionHash
-    })
-    try {
-        transInfos.value.timestamp = (await x.post('/', data)).data.result.timestamp
-    } catch (error) {
-        console.log(error)
-    }
-    transInfos.value.hash = transactionInfos.hash
-    transInfos.value.to = String(transactionInfos.to)
-    transInfos.value.from = transactionInfos.from
-    transInfos.value.blockHash = transactionInfos.blockHash
-    transInfos.value.blockNumber = Number(transactionInfos.blockNumber)
-    transInfos.value.value = formatEther(transactionInfos.value)
-    transInfos.value.status = transactionReceipt.status
-    transInfos.value.date = getDateFormated(transInfos.value.timestamp)
-    transInfos.value.logs.receipt = transactionReceipt
-    transInfos.value.logs.transaction = transactionInfos
-    if (transInfos.value.devise == undefined)
-        await getErc20Infos(transactionInfos, transactionReceipt, transInfos)
-    return transactionInfos
-}
+  const transactionInfos = await pubClient.getTransaction({
+    hash: transactionHash
+  });
+  const data = {
+    "id": 1,
+    "jsonrpc": "2.0",
+    "method": "eth_getBlockByHash",
+    "params": [
+      transactionInfos.blockHash,
+      false
+    ]
+  };
+  const transactionReceipt = await pubClient.getTransactionReceipt({
+    hash: transactionHash
+  });
+  try {
+    transInfos.value.timestamp = (await x.post('/', data)).data.result.timestamp;
+  } catch (error) {
+    console.log(error);
+  }
+  transInfos.value.hash = transactionInfos.hash;
+  transInfos.value.to = String(transactionInfos.to);
+  transInfos.value.from = transactionInfos.from;
+  transInfos.value.blockHash = transactionInfos.blockHash;
+  transInfos.value.blockNumber = Number(transactionInfos.blockNumber);
+  transInfos.value.value = formatEther(transactionInfos.value);
+  transInfos.value.status = transactionReceipt.status;
+  transInfos.value.date = getDateFormated(transInfos.value.timestamp);
+  transInfos.value.logs.receipt = transactionReceipt;
+  transInfos.value.logs.transaction = transactionInfos;
+  if (transInfos.value.devise == undefined)
+    await getErc20Infos(transactionInfos, transactionReceipt, transInfos);
+  return transactionInfos;
+};
 
 onMounted(() => {
-    getInfos()
-})
+  getInfos();
+});
 </script>
 
 <style scoped>
diff --git a/src/components/transaction/transactions_container.vue b/src/components/transaction/transactions_container.vue
index bcf417e..9bf620c 100644
--- a/src/components/transaction/transactions_container.vue
+++ b/src/components/transaction/transactions_container.vue
@@ -1,143 +1,149 @@
 <template>
-    <main class="transactions">
-        <div class="title">Transactions</div>
-        <div class="list">
-            <transaction v-for="t in transactionshash" :hash="t.hash" :devise="t.devise" :from="t.from.valueOf()"/>
-        </div>
-        <div class="link">
-            <div class="clickable">
-                <h3 @click="walletLink()">View full history on etherscan</h3>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
-            </div>
-        </div>
-    </main>
+  <main class="transactions">
+    <div class="title">Transactions</div>
+    <div class="list">
+      <transaction v-for="t in transactionshash" :hash="t.hash" :devise="t.devise" :from="t.from.valueOf()" :key="t.hash"/>
+    </div>
+    <div class="link">
+      <div class="clickable">
+        <h3 @click="walletLink()">View full history on etherscan</h3>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
+      </div>
+    </div>
+  </main>
 </template>
 
-
 <script setup lang="ts">
 import transaction from './transaction.vue'
-import { x, account } from '../../main'
+import { ref, computed, onMounted } from 'vue'
+import { useStore } from 'vuex'
 import { fromHex } from 'viem'
-import { ref } from 'vue'
-import { onMounted } from 'vue';
 
 interface Transaction {
-    hash: string,
-    devise: string,
-    from: Boolean,
-    blockNb: number
+  hash: string,
+  devise: string,
+  from: Boolean,
+  blockNb: number
 }
 
+const store = useStore();
+const account = computed(() => store.getters.selectedAccount);
 const transactionshash = ref<Transaction[]>([])
 
 const walletLink = () => {
-    window.open(`https://sepolia.etherscan.io/address/${account}`)
+  if (account.value) {
+    window.open(`https://sepolia.etherscan.io/address/${account.value}`);
+  }
 }
 
 const getUniqueTransactions = (transactions: any): Transaction[] => {
-    let trans: Transaction[] = [];
-    let unique = true;
-    for (const t of transactions) {
-        unique = true;
-        for (const tr of trans) {
-            if (t.hash == tr.hash) {
-                unique = false;
-                break;
-            }
-        }
-        if (unique)
-            trans.push(t);
+  let trans: Transaction[] = [];
+  let unique = true;
+  for (const t of transactions) {
+    unique = true;
+    for (const tr of trans) {
+      if (t.hash == tr.hash) {
+        unique = false;
+        break;
+      }
     }
-    return trans;
+    if (unique)
+      trans.push(t);
+  }
+  return trans;
 }
 
 const getLastTransactions = (transactions: Transaction[]): Transaction[] => {
-    const sortedTransactions = transactions.sort((a, b) => b.blockNb - a.blockNb);
-    const uniqueSortedTransactions = getUniqueTransactions(sortedTransactions);
-    const last10Transactions = uniqueSortedTransactions.slice(0, 8);
-    return last10Transactions;
+  const sortedTransactions = transactions.sort((a, b) => b.blockNb - a.blockNb);
+  const uniqueSortedTransactions = getUniqueTransactions(sortedTransactions);
+  const last10Transactions = uniqueSortedTransactions.slice(0, 8);
+  return last10Transactions;
 }
 
 const btn = async () => {
-    while (!account)
-        await new Promise(r => setTimeout(r, 500));
-    let transactions = await getTransactionsFrom()
-    let ls: Transaction[] = []
-    for (const transaction of transactions) {
-        ls.push({
-            hash: transaction.hash,
-            devise: transaction.asset,
-            from: false,
-            blockNb: fromHex(transaction.blockNum, 'number')
-        });
-    }
-    transactions = await getTransactionsTo()
-    for (const transaction of transactions) {
-        ls.push({
-            hash: transaction.hash,
-            devise: transaction.asset,
-            from: true,
-            blockNb: fromHex(transaction.blockNum, 'number')
-        });
-    }
-    transactionshash.value = getLastTransactions(ls)
-    console.log("transactions: ", transactionshash.value)
-}
+  if (!account.value) return;
 
-const getTransactionsFrom = async () => {
-    let data = JSON.stringify({
-        "jsonrpc": "2.0",
-        "id": 0,
-        "method": "alchemy_getAssetTransfers",
-        "params": [
-            {
-            "fromBlock": "0x0",
-            "toBlock": "latest",
-            "toAddress": account,
-            "category": ["external", "internal", "erc20"],
-            "excludeZeroValue": false
-            }
-        ]
+  let transactions = await getTransactionsFrom();
+  let ls: Transaction[] = [];
+
+  for (const transaction of transactions) {
+    ls.push({
+      hash: transaction.hash,
+      devise: transaction.asset,
+      from: false,
+      blockNb: fromHex(transaction.blockNum, 'number')
     });
+  }
+
+  transactions = await getTransactionsTo();
+  for (const transaction of transactions) {
+    ls.push({
+      hash: transaction.hash,
+      devise: transaction.asset,
+      from: true,
+      blockNb: fromHex(transaction.blockNum, 'number')
+    });
+  }
 
-    try {
-        const transactions = (await x.post('/', data)).data.result.transfers
-        // console.log("to me: ", transactions)
-        return transactions
-    } catch (error) {
-        return []
-    }
+  transactionshash.value = getLastTransactions(ls);
+  console.log("transactions: ", transactionshash.value);
 }
 
-const getTransactionsTo = async () => {
-    let data = JSON.stringify({
-        "jsonrpc": "2.0",
-        "id": 0,
-        "method": "alchemy_getAssetTransfers",
-        "params": [
-            {
-            "fromBlock": "0x0",
-            "toBlock": "latest",
-            "fromAddress": account,
-            "category": ["external", "internal", "erc20"],
-            "excludeZeroValue": false
-            }
-        ]
-    });
+const getTransactionsFrom = async () => {
+  if (!account.value) return [];
+
+  const data = JSON.stringify({
+    "jsonrpc": "2.0",
+    "id": 0,
+    "method": "alchemy_getAssetTransfers",
+    "params": [
+      {
+        "fromBlock": "0x0",
+        "toBlock": "latest",
+        "toAddress": account.value,
+        "category": ["external", "internal", "erc20"],
+        "excludeZeroValue": false
+      }
+    ]
+  });
+
+  try {
+    const transactions = (await store.getters.axiosInstance.post('/', data)).data.result.transfers;
+    return transactions;
+  } catch (error) {
+    return [];
+  }
+}
 
-    try {
-        const transactions = (await x.post('/', data)).data.result.transfers
-        // console.log("from me:", transactions)
-        return transactions
-    } catch (error) {
-        return []
-    }
+const getTransactionsTo = async () => {
+  if (!account.value) return [];
+
+  const data = JSON.stringify({
+    "jsonrpc": "2.0",
+    "id": 0,
+    "method": "alchemy_getAssetTransfers",
+    "params": [
+      {
+        "fromBlock": "0x0",
+        "toBlock": "latest",
+        "fromAddress": account.value,
+        "category": ["external", "internal", "erc20"],
+        "excludeZeroValue": false
+      }
+    ]
+  });
+
+  try {
+    const transactions = (await store.getters.axiosInstance.post('/', data)).data.result.transfers;
+    return transactions;
+  } catch (error) {
+    return [];
+  }
 }
 
 onMounted(async () => {
-    await btn();
-})
-
+  await btn();
+});
 </script>
 
 <style scoped>
diff --git a/src/components/wallet/verticalNavbar.vue b/src/components/wallet/verticalNavbar.vue
index 5334412..c041bf0 100644
--- a/src/components/wallet/verticalNavbar.vue
+++ b/src/components/wallet/verticalNavbar.vue
@@ -1,56 +1,58 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
-import walletCard from '@/components/wallet/walletCard.vue'
-import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue'
-import { generateWallet } from '@/utils/wallet'
+import { defineComponent } from 'vue';
+import { mapGetters, mapActions } from 'vuex';
+import walletCard from '@/components/wallet/walletCard.vue';
+import mnemonicPopUp from '@/components/wallet/mnemonicPopUp.vue';
+import { generateWallet } from '@/utils/wallet';
+import type { WalletClient } from 'viem';
 
-interface account {
-  name: string
-  address: string
-  mnemonic: string
+interface Account {
+  name: string;
+  address: string;
+  mnemonic: string;
+  wallet: WalletClient;
 }
 
 export default defineComponent({
-  name: "NavBar",
+  name: 'NavBar',
   components: {
     walletCard,
     mnemonicPopUp,
   },
+  computed: {
+    ...mapGetters(['accounts', 'selectedAccount', 'accountReducedAddresses']),
+    visibleMnemonicAccounts(): Account[] {
+      return this.accounts.filter(
+        (account: Account) => this.selectedAccount === account.address && this.isMnemonicVisible
+      );
+    },
+  },
   data() {
     return {
-      accounts: [] as account[],
-      selectedAccount: null as string | null,
-      isMnemonicVisible: false
-    }
-  },
-  computed: {
-    visibleMnemonicAccounts(): account[] {
-      return this.accounts.filter(account => this.selectedAccount === account.address && this.isMnemonicVisible)
-    }
+      isMnemonicVisible: false,
+    };
   },
   methods: {
-    addAccount() {
-      const { newWallet, mnemonic } = generateWallet()
-      const newAccount: account = {
+    ...mapActions(['addAccount', 'selectAccount']),
+    addAccountToStore() {
+      const { newWallet, mnemonic } = generateWallet();
+      const newAccount: Account = {
         name: `Account ${this.accounts.length + 1}`,
-        address: this.reduceAddress(newWallet.account.address),
-        mnemonic: mnemonic
-      }
-      this.accounts.push(newAccount)
-      this.selectedAccount = newAccount.address
-      this.isMnemonicVisible = true
-    },
-    reduceAddress(address: string) {
-      return `${address.slice(0, 7)}...${address.slice(-5)}`
+        address: newWallet.account.address,
+        mnemonic: mnemonic,
+        wallet: newWallet
+      };
+      this.addAccount(newAccount);
+      this.isMnemonicVisible = true;
     },
-    selectAccount(address: string) {
-      this.selectedAccount = address
+    selectAccountInStore(address: string) {
+      this.selectAccount(address);
     },
     closePopUp() {
-      this.isMnemonicVisible = false
-    }
-  }
-})
+      this.isMnemonicVisible = false;
+    },
+  },
+});
 </script>
 
 <template>
@@ -62,14 +64,14 @@ export default defineComponent({
     <div class="flex-1 overflow-y-auto">
       <div class="p-4 space-y-4">
         <walletCard
-          v-for="account in accounts"
+          v-for="account in accountReducedAddresses"
           :key="account.address"
           :accountName="account.name"
-          :accountAddress="account.address"
+          :accountAddress="account.reducedAddress"
           :isSelected="selectedAccount === account.address"
-          @select="selectAccount(account.address)"
+          @select="selectAccountInStore(account.address)"
         />
-        <div @click="addAccount" class="bg-background-gray rounded-2xl p-3 flex items-center justify-center border-gray-600 border hover:bg-gray-600">
+        <div @click="addAccountToStore" class="bg-background-gray rounded-2xl p-3 flex items-center justify-center border-gray-600 border hover:bg-gray-600">
           <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
@@ -82,11 +84,11 @@ export default defineComponent({
     </div>
   </div>
   <div v-if="isMnemonicVisible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-      <mnemonicPopUp
-        v-for="account in visibleMnemonicAccounts"
-        :key="account.address"
-        :mnemonic="account.mnemonic"
-        @close="closePopUp"
-      />
+    <mnemonicPopUp
+      v-for="account in visibleMnemonicAccounts"
+      :key="account.address"
+      :mnemonic="account.mnemonic"
+      @close="closePopUp"
+    />
   </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 37fb68a..82541ea 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,21 +9,16 @@ import { createApp, nextTick } from 'vue'
 import App from './App.vue'
 import { createPublicClient, createWalletClient, http, custom } from 'viem'
 import { sepolia } from 'viem/chains'
-import axios from 'axios';
+import axios from 'axios'
+import store from './store'
 
 const pub_client = createPublicClient({
     chain: sepolia,
     transport: http(),
 })
 
-const wal_client = createWalletClient({
-    chain: sepolia,
-    transport: custom(window.ethereum!),
-})
-
 const apiKey = import.meta.env.VITE_ALCHEMY_API_KEY
 const baseURL = `https://eth-sepolia.g.alchemy.com/v2/${apiKey}`;
-//const axiosURL = `${baseURL}`;
 
 const ax = axios.create({
     baseURL: baseURL,
@@ -32,16 +27,28 @@ const ax = axios.create({
     },
 });
 
-const accounts = await wal_client.requestAddresses()
-console.log(accounts)
-
 export const pubClient = pub_client;
-export const walClient = wal_client;
-export const account = accounts[0];
 export const x = ax;
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(store)
+app.mount('#app')
 
 nextTick().then(() => {
     loading.unmount()
-})
\ No newline at end of file
+})
+
+export async function connectWallet() {
+    const wal_client = createWalletClient({
+        chain: sepolia,
+        transport: custom(window.ethereum!),
+    })
+
+    const accounts = await wal_client.requestAddresses()
+    console.log(accounts)
+
+    store.dispatch('addAccount', {
+        address: accounts[0],
+        walletClient: wal_client,
+    })
+}
diff --git a/src/sendTransaction.ts b/src/sendTransaction.ts
index 5104464..51f0eb1 100644
--- a/src/sendTransaction.ts
+++ b/src/sendTransaction.ts
@@ -1,10 +1,19 @@
-import { account, walClient } from './main'
+import { useStore } from 'vuex';
 
-export const sendTransaction = async (to: `0x${string}`, value: bigint) : Promise<`0x${string}`> => {
-  console.log("amount", value)
+export const sendTransaction = async (to: `0x${string}`, value: bigint): Promise<`0x${string}`> => {
+  const store = useStore();
+
+  const account = store.getters.selectedAccount;
+  const walClient = store.getters.walletClient;
+
+  if (!account || !walClient) {
+    throw new Error("Account or Wallet Client not available");
+  }
+
+  console.log("amount", value);
   return await walClient.sendTransaction({
     account,
     to: to,
     value: value,
-  })
-}
+  });
+};
diff --git a/src/store.ts b/src/store.ts
new file mode 100644
index 0000000..73f7b78
--- /dev/null
+++ b/src/store.ts
@@ -0,0 +1,67 @@
+import { createStore } from 'vuex';
+import type { WalletClient } from 'viem';
+
+interface Account {
+  name: string;
+  address: string;
+  reducedAddress: string;
+  mnemonic: string;
+  wallet: WalletClient;
+}
+
+interface State {
+  accounts: Account[];
+  selectedAccount: string | null;
+}
+
+const state: State = {
+  accounts: [],
+  selectedAccount: null,
+};
+
+const mutations = {
+  addAccount(state: State, account: Account) {
+    account.reducedAddress = `${account.address.slice(0, 7)}...${account.address.slice(-5)}`;
+    state.accounts.push(account);
+    state.selectedAccount = account.address;
+  },
+  selectAccount(state: State, address: string) {
+    state.selectedAccount = address;
+  },
+  clearAccounts(state: State) {
+    state.accounts = [];
+    state.selectedAccount = null;
+  }
+};
+
+const actions = {
+  addAccount({ commit }: { commit: Function }, account: Account) {
+    commit('addAccount', account);
+  },
+  selectAccount({ commit }: { commit: Function }, address: string) {
+    commit('selectAccount', address);
+  },
+  clearAccounts({ commit }: { commit: Function }) {
+    commit('clearAccounts');
+  }
+};
+
+const getters = {
+  accounts: (state: State) => state.accounts,
+  selectedAccount: (state: State) => state.selectedAccount,
+  accountReducedAddresses: (state: State) => {
+    return state.accounts.map(account => ({
+      ...account,
+      reducedAddress: `${account.address.slice(0, 7)}...${account.address.slice(-5)}`
+    }));
+  }
+};
+
+const store = createStore({
+  state,
+  mutations,
+  actions,
+  getters
+});
+
+export default store;
diff --git a/tailwind.config.js b/tailwind.config.js
index 482d442..2682c7d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,9 @@ export default {
       },
     }
   },
-  plugins: [],
+  plugins: [
+    // eslint-disable-next-line no-undef
+    require('daisyui'),
+  ],
 }