diff --git a/package.json b/package.json
index 24813a3..884f35b 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "dompurify": "^3.0.9",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
+    "mitt": "^3.0.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vue": "^3.4.15",
     "vue-i18n": "9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a88b153..db765ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ dependencies:
   graphql-tag:
     specifier: ^2.12.6
     version: 2.12.6(graphql@16.8.1)
+  mitt:
+    specifier: ^3.0.1
+    version: 3.0.1
   vite-plugin-node-polyfills:
     specifier: ^0.21.0
     version: 0.21.0(vite@5.0.12)
@@ -5561,6 +5564,10 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dev: true
 
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: false
+
   /mlly@1.5.0:
     resolution: {integrity: sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==}
     dependencies:
@@ -6315,7 +6322,6 @@ packages:
       react: 16.14.0
       scheduler: 0.19.1
     dev: false
-    bundledDependencies: false
 
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -6332,7 +6338,6 @@ packages:
       object-assign: 4.1.1
       prop-types: 15.8.1
     dev: false
-    bundledDependencies: false
 
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
diff --git a/src/App.vue b/src/App.vue
index 18fcecb..8f9aaa0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { RouterView } from "vue-router";
 
-import HeaderSection from "./components/layout/HeaderSection.vue";
-import FooterSection from "./components/layout/FooterSection.vue";
+import HeaderSection from "@/components/layout/HeaderSection.vue";
+import FooterSection from "@/components/layout/FooterSection.vue";
 
-import { useGithubDiscussions } from "./composables/useGithubDiscussions";
+import { useGithubDiscussions } from "@/composables/useGithubDiscussions";
 
 useGithubDiscussions().setup();
 </script>
diff --git a/src/bus/index.ts b/src/bus/index.ts
new file mode 100644
index 0000000..8f33b8d
--- /dev/null
+++ b/src/bus/index.ts
@@ -0,0 +1,5 @@
+import mitt from "mitt";
+
+const bus = mitt();
+
+export { bus };
diff --git a/src/components/AddressBalance.vue b/src/components/AddressBalance.vue
index 5fe850d..7278332 100644
--- a/src/components/AddressBalance.vue
+++ b/src/components/AddressBalance.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useChainData } from "../composables/useChainData";
+import { useChainData } from "@/composables/useChainData";
 const props = defineProps<{
   address: string;
 }>();
diff --git a/src/components/layout/HeaderSection.vue b/src/components/layout/HeaderSection.vue
index b8c9e85..5933353 100644
--- a/src/components/layout/HeaderSection.vue
+++ b/src/components/layout/HeaderSection.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import WalletConnect from "../popups/WalletConnect.vue";
+import WalletConnect from "@/components/popups/WalletConnect.vue";
 </script>
 
 <template>
diff --git a/src/components/popups/ProposalDeposit.vue b/src/components/popups/ProposalDeposit.vue
index 9b97048..4d6fb2b 100644
--- a/src/components/popups/ProposalDeposit.vue
+++ b/src/components/popups/ProposalDeposit.vue
@@ -5,11 +5,11 @@ import { MsgDeposit } from "@atomone/govgen-types/govgen/gov/v1beta1/tx";
 
 import chainConfig from "@/chain-config.json";
 
-import ModalWrap from "../common/ModalWrap.vue";
-import UiInput from "../ui/UiInput.vue";
-import UiInfo from "../ui/UiInfo.vue";
+import ModalWrap from "@/components/common/ModalWrap.vue";
+import UiInput from "@/components/ui/UiInput.vue";
+import UiInfo from "@/components/ui/UiInfo.vue";
 
-import { useWallet } from "../../composables/useWallet";
+import { useWallet } from "@/composables/useWallet";
 import { useProposals } from "@/composables/useProposals";
 import { formatAmount } from "@/utility";
 
@@ -77,20 +77,22 @@ const signDeposit = async () => {
         class="justify-center px-6 py-4 rounded bg-gradient text-dark text-300 text-center cursor-pointer"
         @click="toogleModal(true)"
       >
-        Deposit
+        {{ $t("components.ProposalDeposit.cta") }}
       </div>
     </div>
 
     <ModalWrap :visible="isOpen" :is-empty="true" @back="isOpen = false">
       <div class="px-10 py-12 bg-grey-400 rounded w-screen max-w-[25rem]">
         <div v-if="!isDeposit" class="flex flex-col gap-6 relative">
-          <span class="text-gradient font-termina text-700 text-center">Deposit</span>
+          <span class="text-gradient font-termina text-700 text-center">{{
+            $t("components.ProposalDeposit.cta")
+          }}</span>
           <div class="flex flex-col gap-10">
             <div>
               <div class="flex flex-col gap-10">
                 <p class="text-grey-100 text-center text-200">
                   {{ formatAmount(totalDeposit, depositDenomDecimals) }} /
-                  {{ formatAmount(minDeposit, depositDenomDecimals) }} deposited
+                  {{ formatAmount(minDeposit, depositDenomDecimals) }} {{ $t("components.ProposalDeposit.act") }}
                 </p>
 
                 <form class="flex flex-col items-center gap-2">
@@ -98,7 +100,7 @@ const signDeposit = async () => {
                     v-model="depositAmount"
                     type="number"
                     placeholder="e.g. 50"
-                    label="Enter deposit amount"
+                    :label="$t('components.ProposalDeposit.instructions')"
                     :min="0"
                     class="w-full justify-end"
                   />
@@ -112,7 +114,14 @@ const signDeposit = async () => {
                   class="px-6 py-4 rounded bg-gradient text-dark text-300 text-center w-full"
                   @click="signDeposit()"
                 >
-                  Confirm & Sign
+                  {{ $t("ui.actions.confirm") }}
+                </button>
+
+                <!-- TODO: get CLI cmd-->
+                <button
+                  class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
+                >
+                  {{ $t("ui.actions.cli") }}
                 </button>
               </div>
 
diff --git a/src/components/popups/ProposalVote.vue b/src/components/popups/ProposalVote.vue
index 09aa930..1d68665 100644
--- a/src/components/popups/ProposalVote.vue
+++ b/src/components/popups/ProposalVote.vue
@@ -4,14 +4,15 @@ import { computed, ref, reactive } from "vue";
 import { MsgVote, MsgVoteWeighted } from "@atomone/govgen-types/govgen/gov/v1beta1/tx";
 import { VoteOption } from "cosmjs-types/cosmos/gov/v1beta1/gov";
 
-import ModalWrap from "../common/ModalWrap.vue";
+import ModalWrap from "@/components/common/ModalWrap.vue";
 
-import UiSwitch from "../ui/UiSwitch.vue";
-import UiState from "../ui/UiState.vue";
-import UiInput from "../ui/UiInput.vue";
-import UiInfo from "../ui/UiInfo.vue";
+import { useI18n } from "vue-i18n";
+import UiSwitch from "@/components/ui/UiSwitch.vue";
+import UiState from "@/components/ui/UiState.vue";
+import UiInput from "@/components/ui/UiInput.vue";
+import UiInfo from "@/components/ui/UiInfo.vue";
 
-import { useWallet } from "../../composables/useWallet";
+import { useWallet } from "@/composables/useWallet";
 import { useProposals } from "@/composables/useProposals";
 
 interface Props {
@@ -19,6 +20,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 
+const { t } = useI18n();
 const isOpen = ref(false);
 const isVoted = ref(false);
 
@@ -29,10 +31,10 @@ const tab = ref(tabOptions[0]);
 
 // Votes info
 const voteList: Partial<Record<VoteOption, { label: string; color: string }>> = {
-  [VoteOption.VOTE_OPTION_YES]: { label: "Yes", color: "text-accent-100" },
-  [VoteOption.VOTE_OPTION_NO]: { label: "No", color: "text-neg-200" },
-  [VoteOption.VOTE_OPTION_NO_WITH_VETO]: { label: "No with Veto", color: "text-neg-200" },
-  [VoteOption.VOTE_OPTION_ABSTAIN]: { label: "Abstain", color: "text-grey-100" },
+  [VoteOption.VOTE_OPTION_YES]: { label: t("voteOptions.yes"), color: "text-accent-100" },
+  [VoteOption.VOTE_OPTION_NO]: { label: t("voteOptions.no"), color: "text-neg-200" },
+  [VoteOption.VOTE_OPTION_NO_WITH_VETO]: { label: t("voteOptions.nwv"), color: "text-neg-200" },
+  [VoteOption.VOTE_OPTION_ABSTAIN]: { label: t("voteOptions.abstain"), color: "text-grey-100" },
 };
 
 // Vote records
@@ -120,14 +122,14 @@ const signVote = async () => {
         class="justify-center px-6 py-4 rounded bg-gradient text-dark text-300 text-center cursor-pointer"
         @click="toogleModal(true)"
       >
-        Vote
+        {{ $t("components.ProposalVote.cta") }}
       </div>
     </div>
 
     <ModalWrap :visible="isOpen" :is-empty="true" @back="isOpen = false">
       <div class="px-10 py-12 bg-grey-400 rounded w-screen max-w-[25rem]">
         <div v-if="!isVoted" class="flex flex-col gap-6 relative">
-          <span class="text-gradient font-termina text-700 text-center">Vote</span>
+          <span class="text-gradient font-termina text-700 text-center">{{ $t("components.ProposalVote.cta") }}</span>
           <UiSwitch id="voteType" v-model="tab" :options="tabOptions" class="flex w-2/3 mx-auto" @click="resetVote()" />
           <div class="flex flex-col gap-10">
             <div>
@@ -147,7 +149,7 @@ const signVote = async () => {
 
                 <div v-else-if="tab === 'Weighted'" class="flex flex-col gap-10">
                   <p class="text-grey-100 text-center text-200">
-                    Define weight for each of the voting options. The sum of weights must be equal to 1.
+                    {{ $t("components.ProposalVote.weightedInstructions") }}
                   </p>
 
                   <form class="flex flex-col items-center gap-2">
@@ -172,14 +174,14 @@ const signVote = async () => {
             <div class="flex flex-col gap-4">
               <div v-show="voteStraight || checkVoteWeighted" class="flex flex-col gap-4">
                 <button class="px-6 py-4 rounded bg-gradient text-dark text-300 text-center w-full" @click="signVote()">
-                  Confirm & Sign
+                  {{ $t("ui.actions.confirm") }}
                 </button>
 
                 <!-- TODO: get CLI cmd-->
                 <button
                   class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
                 >
-                  or Copy CLI Command
+                  {{ $t("ui.actions.cli") }}
                 </button>
               </div>
 
@@ -187,7 +189,7 @@ const signVote = async () => {
                 class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
                 @click="toogleModal(false)"
               >
-                Cancel
+                {{ $t("ui.actions.cancel") }}
               </button>
             </div>
           </div>
diff --git a/src/components/popups/WalletConnect.vue b/src/components/popups/WalletConnect.vue
index 25fb6c0..2806d0b 100644
--- a/src/components/popups/WalletConnect.vue
+++ b/src/components/popups/WalletConnect.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { Wallets, useWallet, getWalletHelp } from "../../composables/useWallet";
-import ConnectButton from "../ui/ConnectButton.vue";
+import { Wallets, useWallet, getWalletHelp } from "@/composables/useWallet";
+import ConnectButton from "@/components/ui/ConnectButton.vue";
 import { Ref, computed, ref } from "vue";
-import { shorten } from "../../utility";
-import UserBalance from "../helper/UserBalance.vue";
+import { shorten } from "@/utility";
+import UserBalance from "@/components/helper/UserBalance.vue";
+import { bus } from "@/bus";
 
 const isOpen = ref(false);
 const isConnecting = ref(false);
@@ -56,6 +57,9 @@ const cancelConnect = () => {
   isOpen.value = false;
   isError.value = false;
 };
+bus.on("open", () => {
+  isOpen.value = true;
+});
 </script>
 
 <template>
diff --git a/src/components/ui/SimpleBadge.vue b/src/components/ui/SimpleBadge.vue
index 9ccbf18..337c29e 100644
--- a/src/components/ui/SimpleBadge.vue
+++ b/src/components/ui/SimpleBadge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ContextTypes } from "@/types/ui";
 import { computed } from "vue";
-import Icon from "./Icon.vue";
+import Icon from "@/components/ui/Icon.vue";
 
 const { type, icon } = defineProps<{ type: ContextTypes; icon?: string }>();
 
diff --git a/src/components/ui/UiInfo.vue b/src/components/ui/UiInfo.vue
index 4798823..b18cde2 100644
--- a/src/components/ui/UiInfo.vue
+++ b/src/components/ui/UiInfo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import UiIcon from "./Icon.vue";
+import UiIcon from "@/components/ui/Icon.vue";
 
 interface Props {
   type?: "info" | "warning" | "danger" | "success" | "content";
diff --git a/src/components/ui/UiState.vue b/src/components/ui/UiState.vue
index 5575080..7c138ad 100644
--- a/src/components/ui/UiState.vue
+++ b/src/components/ui/UiState.vue
@@ -35,7 +35,7 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import Icon from "./Icon.vue";
+import Icon from "@/components/ui/Icon.vue";
 
 interface Props {
   type: "checkbox" | "radio";
diff --git a/src/composables/useChainData.ts b/src/composables/useChainData.ts
index 81b2f92..44b2929 100644
--- a/src/composables/useChainData.ts
+++ b/src/composables/useChainData.ts
@@ -6,7 +6,7 @@ import {
   useProposalsQuery,
   useStakingQuery,
   useVoteHistoryQuery,
-} from "./queries";
+} from "@/composables/queries";
 
 export const useChainData = () => {
   const getBalance = (address: string) => {
diff --git a/src/composables/useGithubDiscussions.ts b/src/composables/useGithubDiscussions.ts
index b0d94b4..93d242c 100644
--- a/src/composables/useGithubDiscussions.ts
+++ b/src/composables/useGithubDiscussions.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from "vue";
 import { useStorage } from "@vueuse/core";
-import { useConfig } from "./useConfig";
-import * as GithubTypes from "../types/github/index";
+import { useConfig } from "@/composables/useConfig";
+import * as GithubTypes from "@/types/github/index";
 import { useRoute, useRouter } from "vue-router";
 
 const config = useConfig();
diff --git a/src/composables/useProposals.ts b/src/composables/useProposals.ts
index bb2a802..7f29382 100644
--- a/src/composables/useProposals.ts
+++ b/src/composables/useProposals.ts
@@ -1,6 +1,6 @@
 import { TextProposal } from "@atomone/govgen-types/govgen/gov/v1beta1/gov";
 import { ParameterChangeProposal } from "@atomone/govgen-types/cosmos/params/v1beta1/params";
-import { useWallet } from "./useWallet";
+import { useWallet } from "@/composables/useWallet";
 import { MsgDeposit, MsgSubmitProposal, MsgVote, MsgVoteWeighted } from "@atomone/govgen-types/govgen/gov/v1beta1/tx";
 import { EncodeObject } from "@cosmjs/proto-signing";
 import { SoftwareUpgradeProposal } from "@atomone/govgen-types/cosmos/upgrade/v1beta1/upgrade";
@@ -36,7 +36,7 @@ export const useProposals = () => {
         plan: proposal.plan,
       }).finish(),
     };
-  }
+  };
   const createProposal = async (proposalMeta: Partial<MsgSubmitProposal>, proposal: EncodeObject) => {
     const SubmitProposal: EncodeObject = {
       typeUrl: "/govgen.gov.v1beta1.MsgSubmitProposal",
diff --git a/src/composables/useWallet.ts b/src/composables/useWallet.ts
index 775fb91..821fcd1 100644
--- a/src/composables/useWallet.ts
+++ b/src/composables/useWallet.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref, computed, Ref } from "vue";
-import chainInfo from "../chain-config.json";
+import chainInfo from "@/chain-config.json";
 import { EncodeObject, OfflineSigner } from "@cosmjs/proto-signing";
 import { getSigningGovgenClient } from "@atomone/govgen-types/govgen/client";
 import { getOfflineSigner } from "@cosmostation/cosmos-client";
diff --git a/src/localization/index.ts b/src/localization/index.ts
index af7487f..8685fe0 100644
--- a/src/localization/index.ts
+++ b/src/localization/index.ts
@@ -66,10 +66,24 @@ export const messages = {
       Search: {
         placeholder: "Search Proposal",
       },
+      ProposalVote: {
+        cta: "Vote",
+        weightedInstructions: "Define weight for each of the voting options. The sum of weights must be equal to 1.",
+      },
+      ProposalDeposit: {
+        cta: "Deposit",
+        act: "deposited",
+        instructions: "Enter deposit amount",
+      },
     },
     ui: {
       readMore: "Read More",
       readLess: "Read Less",
+      actions: {
+        confirm: "Confirm & Sign",
+        cli: "or Copy CLI Command",
+        cancel: "Cancel",
+      },
       tabs: {
         Info: "Info",
         Voters: "Voters",
diff --git a/src/main.ts b/src/main.ts
index 538fc9b..cb8b8c1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,12 @@
 import { createApp, provide, h } from "vue";
 import { DefaultApolloClient } from "@vue/apollo-composable";
-import "./style.css";
-import App from "./App.vue";
-import router from "./router";
+import "@/style.css";
+import App from "@/App.vue";
+import router from "@/router";
 import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client/core";
-import IconVue from "./components/ui/Icon.vue";
+import IconVue from "@/components/ui/Icon.vue";
 import { createI18n } from "vue-i18n";
-import { messages } from "./localization";
+import { messages } from "@/localization";
 
 // HTTP connection to the API
 const httpLink = createHttpLink({
diff --git a/src/router/index.ts b/src/router/index.ts
index ccd4d2a..b8e9751 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,9 +1,9 @@
 import { createRouter, createWebHistory } from "vue-router";
 
-import HomeView from "../views/HomeView.vue";
-import CreateProposalView from "../views/CreateProposalView.vue";
-import ProposalView from "../views/ProposalView.vue";
-// import DesignView from "../views/Design.vue";
+import HomeView from "@/views/HomeView.vue";
+import CreateProposalView from "@/views/CreateProposalView.vue";
+import ProposalView from "@/views/ProposalView.vue";
+// import DesignView from "@/views/Design.vue";
 
 const routerHistory = createWebHistory();
 const routes = [
diff --git a/src/stores/index.ts b/src/stores/index.ts
deleted file mode 100644
index 6dd2ac5..0000000
--- a/src/stores/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createGlobalObservable, useLocalObservable } from "mobx-vue-lite";
-import { ProposalsStore } from "./proposals";
-
-const useProposalsStore = createGlobalObservable(() =>
-  useLocalObservable(() => {
-    return new ProposalsStore();
-  }),
-);
-export { useProposalsStore };
diff --git a/src/stores/proposals.ts b/src/stores/proposals.ts
deleted file mode 100644
index a34f0bc..0000000
--- a/src/stores/proposals.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { makeAutoObservable } from "mobx";
-
-export class ProposalsStore {
-  proposals: unknown[] = [];
-
-  constructor() {
-    makeAutoObservable(this);
-  }
-
-  async fetchProposals() {
-    //Fetch proposals
-    const props: unknown[] = [];
-    this.setProposals(props);
-  }
-  setProposals(proposals: unknown[]) {
-    this.proposals = proposals;
-  }
-}
diff --git a/src/views/ProposalView.vue b/src/views/ProposalView.vue
index 5fbfadf..1382c6a 100644
--- a/src/views/ProposalView.vue
+++ b/src/views/ProposalView.vue
@@ -2,13 +2,14 @@
 import { reactive, ref, computed } from "vue";
 import { useRoute } from "vue-router";
 import { useChainData } from "@/composables/useChainData";
-import GithubComments from "../components/proposals/GithubComments.vue";
-import GithubLinks from "../components/proposals/GithubLinks.vue";
+import { useWallet } from "@/composables/useWallet";
+import GithubComments from "@/components/proposals/GithubComments.vue";
+import GithubLinks from "@/components/proposals/GithubLinks.vue";
 import { Deposit } from "@atomone/govgen-types/govgen/gov/v1beta1/gov";
-import ProposalVote from "../components/popups/ProposalVote.vue";
-import ProposalDeposit from "../components/popups/ProposalDeposit.vue";
+import ProposalVote from "@/components/popups/ProposalVote.vue";
+import ProposalDeposit from "@/components/popups/ProposalDeposit.vue";
 import chainConfig from "@/chain-config.json";
-
+import { bus } from "@/bus";
 import SimpleBadge from "@/components/ui/SimpleBadge.vue";
 import SimpleCard from "@/components/ui/SimpleCard.vue";
 import UiTabs from "@/components/ui/UiTabs.vue";
@@ -22,6 +23,7 @@ type TabNames = "Info" | "Voters" | "Discussions" | "Links";
 dayjs.extend(duration);
 const { getProposal, getParams, getProposalTallies, getStakingStatus } = useChainData();
 
+const { loggedIn } = useWallet();
 const route = useRoute();
 const proposal = getProposal(parseInt(route.params.id as string));
 const proposalTallies = getProposalTallies(parseInt(route.params.id as string));
@@ -251,7 +253,18 @@ function isTabSelected(tabName: TabNames) {
           <div class="progress-bar w-full h-2 bg-grey-200 rounded my-6">
             <div class="bg-gradient rounded h-2 w-2/12" />
           </div>
-          <ProposalVote :proposal-id="proposal?.proposal[0].id" class="w-full" />
+          <ProposalVote v-if="loggedIn" :proposal-id="proposal?.proposal[0].id" class="w-full" />
+          <div
+            v-else
+            class="justify-center px-6 py-4 rounded bg-gradient text-dark text-300 text-center cursor-pointer w-full"
+            @click="
+              () => {
+                bus.emit('open');
+              }
+            "
+          >
+            {{ $t("components.WalletConnect.button") }}
+          </div>
         </SimpleCard>
         <SimpleCard v-if="inDeposit" class="p-10">
           <div class="text-center text-light text-500">{{ timeTo(proposal?.proposal[0].deposit_end_time) }}</div>
@@ -259,11 +272,23 @@ function isTabSelected(tabName: TabNames) {
             <div class="bg-gradient rounded h-2 w-2/12" />
           </div>
           <ProposalDeposit
+            v-if="loggedIn"
             :proposal-id="proposal?.proposal[0].id"
             :min-deposit="minDeposit"
             :total-deposit="totalDeposit"
             :deposit-denom="depositDenom"
           />
+          <div
+            v-else
+            class="justify-center px-6 py-4 rounded bg-gradient text-dark text-300 text-center cursor-pointer w-full"
+            @click="
+              () => {
+                bus.emit('open');
+              }
+            "
+          >
+            {{ $t("components.WalletConnect.button") }}
+          </div>
         </SimpleCard>
       </div>
     </div>