diff --git a/projects/explorer/src/app/pages/proposals/proposal/proposal.component.html b/projects/explorer/src/app/pages/proposals/proposal/proposal.component.html
index 1552b2696..43c362a1f 100644
--- a/projects/explorer/src/app/pages/proposals/proposal/proposal.component.html
+++ b/projects/explorer/src/app/pages/proposals/proposal/proposal.component.html
@@ -2,6 +2,9 @@
   [proposal]="proposal$ | async"
   [proposalType]="proposalType$ | async"
   [deposits]="deposits$ | async"
+  [depositParams]="depositParams$ | async"
   [tally]="tally$ | async"
+  [tallyParams]="tallyParams$ | async"
   [votes]="votes$ | async"
+  [votingParams]="votingParams$ | async"
 ></view-proposal>
diff --git a/projects/explorer/src/app/pages/proposals/proposal/proposal.component.ts b/projects/explorer/src/app/pages/proposals/proposal/proposal.component.ts
index 590a4cb5f..b472927bd 100644
--- a/projects/explorer/src/app/pages/proposals/proposal/proposal.component.ts
+++ b/projects/explorer/src/app/pages/proposals/proposal/proposal.component.ts
@@ -6,6 +6,9 @@ import {
   InlineResponse20054Deposits,
   InlineResponse20052FinalTallyResult,
   InlineResponse20057Votes,
+  InlineResponse20051DepositParams,
+  InlineResponse20051TallyParams,
+  InlineResponse20051VotingParams,
 } from '@cosmos-client/core/esm/openapi';
 import { CosmosSDKService } from 'projects/explorer/src/app/models/cosmos-sdk.service';
 import { combineLatest, Observable, of } from 'rxjs';
@@ -20,8 +23,11 @@ export class ProposalComponent implements OnInit {
   proposal$: Observable<InlineResponse20052Proposals | undefined>;
   proposalType$: Observable<string | undefined>;
   deposits$: Observable<InlineResponse20054Deposits[] | undefined>;
+  depositParams$: Observable<InlineResponse20051DepositParams | undefined>;
   tally$: Observable<InlineResponse20052FinalTallyResult | undefined>;
+  tallyParams$: Observable<InlineResponse20051TallyParams | undefined>;
   votes$: Observable<InlineResponse20057Votes[] | undefined>;
+  votingParams$: Observable<InlineResponse20051VotingParams | undefined>;
 
   constructor(private route: ActivatedRoute, private cosmosSDK: CosmosSDKService) {
     const proposalID$ = this.route.params.pipe(map((params) => params.id));
@@ -53,6 +59,11 @@ export class ProposalComponent implements OnInit {
       }),
     );
 
+    this.depositParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'deposit')),
+      map((result) => result.data.deposit_params),
+    );
+
     this.tally$ = combined$.pipe(
       mergeMap(([sdk, address]) => rest.gov.tallyresult(sdk.rest, address)),
       map((result) => result.data.tally!),
@@ -62,6 +73,15 @@ export class ProposalComponent implements OnInit {
       }),
     );
 
+    this.tallyParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'tallying')),
+      map((result) => result.data.tally_params),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
+
     this.votes$ = combined$.pipe(
       mergeMap(([sdk, address]) => rest.gov.votes(sdk.rest, address)),
       map((result) => result.data.votes!),
@@ -70,6 +90,15 @@ export class ProposalComponent implements OnInit {
         return of(undefined);
       }),
     );
+
+    this.votingParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'voting')),
+      map((result) => result.data.voting_params),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
   }
 
   ngOnInit(): void {}
diff --git a/projects/explorer/src/app/views/proposals/proposal/proposal.component.html b/projects/explorer/src/app/views/proposals/proposal/proposal.component.html
index 0ddff4845..5a3fe0ffa 100644
--- a/projects/explorer/src/app/views/proposals/proposal/proposal.component.html
+++ b/projects/explorer/src/app/views/proposals/proposal/proposal.component.html
@@ -56,7 +56,11 @@ <h3>Details</h3>
     <h3>Description</h3>
     <mat-card class="mb-4">
       <mat-card-content>
-        <span class="break-all">{{ content.description }}</span>
+        <mat-list>
+          <mat-list-item>
+            <span class="break-all">{{ content.description }}</span>
+          </mat-list-item>
+        </mat-list>
       </mat-card-content>
     </mat-card>
   </ng-container>
@@ -93,57 +97,99 @@ <h3>Votes</h3>
     </mat-card-content>
   </mat-card>
 
+  <mat-card class="mb-4">
+    <mat-card-content>
+      <mat-list>
+        <mat-list-item>
+          <span>Voting Period: </span>
+          <span class="flex-auto"></span>
+          <span>{{ votingParams?.voting_period }}</span>
+        </mat-list-item>
+        <mat-divider [inset]="true"></mat-divider>
+
+        <mat-list-item>
+          <span>Quorum: </span>
+          <span class="flex-auto"></span>
+          <span>{{ tallyParams?.quorum?.substring(0, 5) }}</span>
+        </mat-list-item>
+        <mat-divider [inset]="true"></mat-divider>
+
+        <mat-list-item>
+          <span>Threshold: </span>
+          <span class="flex-auto"></span>
+          <span>{{ tallyParams?.threshold?.substring(0, 5) }}</span>
+        </mat-list-item>
+        <mat-divider [inset]="true"></mat-divider>
+
+        <mat-list-item>
+          <span>Veto Threshold: </span>
+          <span class="flex-auto"></span>
+          <span>{{ tallyParams?.veto_threshold?.substring(0, 5) }}</span>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+
   <h3>deposits</h3>
-  <h4>Total</h4>
   <mat-card class="mb-4">
     <mat-card-content>
       <mat-list>
         <ng-container *ngIf="!proposal?.total_deposit?.length">
-          <span>No Deposit</span>
+          <mat-list-item>
+            <span>No Deposit</span>
+          </mat-list-item>
         </ng-container>
         <ng-container *ngFor="let total of proposal?.total_deposit">
           <mat-list-item>
-            <span>{{ total.amount }}</span>
+            <span>Total Deposit:</span>
             <span class="flex-auto"></span>
-            <span>{{ total.denom }}</span>
+            <span>{{ total.amount }} {{ total.denom }}</span>
+          </mat-list-item>
+        </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+        <ng-container *ngFor="let min of depositParams?.min_deposit">
+          <mat-list-item>
+            <span>Minimum Deposit:</span>
+            <span class="flex-auto"></span>
+            <span>{{ min.amount }} {{ min.denom }}</span>
           </mat-list-item>
-          <mat-divider [inset]="true"></mat-divider>
         </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+        <mat-list-item>
+          <span>Max Deposit Period:</span>
+          <span class="flex-auto"></span>
+          <span>{{ depositParams?.max_deposit_period }}</span>
+        </mat-list-item>
       </mat-list>
     </mat-card-content>
   </mat-card>
 
-  <ng-container *ngFor="let deposit of deposits">
-    <h4>Depositor: {{ deposit.depositor }}</h4>
-    <mat-card class="mb-4">
-      <mat-list>
-        <ng-container *ngIf="!deposit.amount?.length">
-          <span>No Deposit</span>
-        </ng-container>
+  <mat-card class="mb-4">
+    <mat-list>
+      <ng-container *ngFor="let deposit of deposits">
         <ng-container *ngFor="let amount of deposit.amount">
           <mat-list-item>
-            <span>{{ amount.amount }}</span>
+            <span>{{ deposit.depositor }}:</span>
             <span class="flex-auto"></span>
-            <span>{{ amount.denom }}</span>
+            <span>{{ amount.amount }} {{ amount.denom }}</span>
           </mat-list-item>
-          <mat-divider [inset]="true"></mat-divider>
         </ng-container>
-      </mat-list>
-    </mat-card>
-  </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+      </ng-container>
+    </mat-list>
+  </mat-card>
 
-  <ng-container *ngFor="let vote of votes">
-    <h3>Vote</h3>
-    <h4>voter: {{ vote.voter }}</h4>
-    <mat-card>
-      <mat-list>
+  <h3>Vote</h3>
+  <mat-card>
+    <mat-list>
+      <ng-container *ngFor="let vote of votes">
         <mat-list-item>
-          <span>Select: </span>
+          <span class="break-all">{{ vote.voter }}: </span>
           <span class="flex-auto"></span>
-          <span>{{ vote.option }}</span>
+          <span>{{ vote.option?.replace('VOTE_OPTION_', '') }}</span>
         </mat-list-item>
         <mat-divider [inset]="true"></mat-divider>
-      </mat-list>
-    </mat-card>
-  </ng-container>
+      </ng-container>
+    </mat-list>
+  </mat-card>
 </ng-template>
diff --git a/projects/explorer/src/app/views/proposals/proposal/proposal.component.ts b/projects/explorer/src/app/views/proposals/proposal/proposal.component.ts
index caddb7574..ee53831b7 100644
--- a/projects/explorer/src/app/views/proposals/proposal/proposal.component.ts
+++ b/projects/explorer/src/app/views/proposals/proposal/proposal.component.ts
@@ -6,6 +6,9 @@ import {
   InlineResponse20054Deposits,
   InlineResponse20052FinalTallyResult,
   InlineResponse20057Votes,
+  InlineResponse20051DepositParams,
+  InlineResponse20051TallyParams,
+  InlineResponse20051VotingParams,
 } from '@cosmos-client/core/esm/openapi';
 
 @Component({
@@ -21,9 +24,15 @@ export class ProposalComponent implements OnInit {
   @Input()
   deposits?: InlineResponse20054Deposits[] | null;
   @Input()
+  depositParams?: InlineResponse20051DepositParams | null;
+  @Input()
   tally?: InlineResponse20052FinalTallyResult | null;
   @Input()
+  tallyParams?: InlineResponse20051TallyParams | null;
+  @Input()
   votes?: InlineResponse20057Votes[] | null;
+  @Input()
+  votingParams?: InlineResponse20051VotingParams | null;
 
   constructor() {}
 
diff --git a/projects/portal/src/app/app.module.ts b/projects/portal/src/app/app.module.ts
index 052e9aa73..ef2abb248 100644
--- a/projects/portal/src/app/app.module.ts
+++ b/projects/portal/src/app/app.module.ts
@@ -5,6 +5,8 @@ import { AppDelegateFormDialogModule } from './pages/dialogs/delegate/delegate-f
 import { AppDelegateMenuDialogModule } from './pages/dialogs/delegate/delegate-menu-dialog/delegate-menu-dialog.module';
 import { AppRedelegateFormDialogModule } from './pages/dialogs/delegate/redelegate-form-dialog/redelegate-form-dialog.module';
 import { AppUndelegateFormDialogModule } from './pages/dialogs/delegate/undelegate-form-dialog/undelegate-form-dialog.module';
+import { AppDepositFormDialogModule } from './pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.module';
+import { AppVoteFormDialogModule } from './pages/dialogs/vote/vote-form-dialog/vote-form-dialog.module';
 import { reducers, metaReducers } from './reducers';
 import { TxFeeConfirmDialogModule } from './views/cosmos/tx-fee-confirm-dialog/tx-fee-confirm-dialog.module';
 import { ConnectWalletCompletedDialogModule } from './views/dialogs/wallets/connect-wallet-completed-dialog/connect-wallet-completed-dialog.module';
@@ -64,6 +66,8 @@ import { LoadingDialogModule } from 'ng-loading-dialog';
     AppDelegateMenuDialogModule,
     AppRedelegateFormDialogModule,
     AppUndelegateFormDialogModule,
+    AppVoteFormDialogModule,
+    AppDepositFormDialogModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/projects/portal/src/app/models/cosmos/gov.application.service.ts b/projects/portal/src/app/models/cosmos/gov.application.service.ts
new file mode 100644
index 000000000..6a0534062
--- /dev/null
+++ b/projects/portal/src/app/models/cosmos/gov.application.service.ts
@@ -0,0 +1,317 @@
+import { convertHexStringToUint8Array } from '../../utils/converter';
+import { TxFeeConfirmDialogComponent } from '../../views/cosmos/tx-fee-confirm-dialog/tx-fee-confirm-dialog.component';
+import { WalletApplicationService } from '../wallets/wallet.application.service';
+import { StoredWallet } from '../wallets/wallet.model';
+import { GovService } from './gov.service';
+import { SimulatedTxResultResponse } from './tx-common.model';
+import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
+import { proto } from '@cosmos-client/core';
+import { InlineResponse20075 } from '@cosmos-client/core/esm/openapi';
+import { LoadingDialogService } from 'ng-loading-dialog';
+import { VoteFormDialogComponent } from '../../pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component';
+import { DepositFormDialogComponent } from '../../pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GovApplicationService {
+  constructor(
+    private readonly router: Router,
+    private readonly snackBar: MatSnackBar,
+    private readonly dialog: MatDialog,
+    private readonly loadingDialog: LoadingDialogService,
+    private readonly gov: GovService,
+    private readonly walletApplicationService: WalletApplicationService,
+  ) {}
+
+  async openVoteFormDialog(proposalID: number): Promise<void> {
+    const txHash = await this.dialog
+      .open(VoteFormDialogComponent, { data: proposalID })
+      .afterClosed()
+      .toPromise();
+    await this.router.navigate(['txs', txHash]);
+  }
+
+  async openDepositFormDialog(proposalID: number): Promise<void> {
+    const txHash = await this.dialog
+      .open(DepositFormDialogComponent, { data: proposalID })
+      .afterClosed()
+      .toPromise();
+    await this.router.navigate(['txs', txHash]);
+  }
+
+  // WIP
+  async submitProposal(minimumGasPrice: proto.cosmos.base.v1beta1.ICoin) {
+    const privateWallet: StoredWallet & { privateKey: string } =
+      await this.walletApplicationService.openUnunifiKeyFormDialog();
+    if (!privateWallet || !privateWallet.privateKey) {
+      this.snackBar.open('Failed to get Wallet info from dialog! Tray again!', 'Close');
+      return;
+    }
+
+    const privateKey = convertHexStringToUint8Array(privateWallet.privateKey);
+
+    if (!privateKey) {
+      this.snackBar.open('Invalid PrivateKey!', 'Close');
+      return;
+    }
+
+    // simulate
+    let simulatedResultData: SimulatedTxResultResponse;
+    let gas: proto.cosmos.base.v1beta1.ICoin;
+    let fee: proto.cosmos.base.v1beta1.ICoin;
+
+    const dialogRefSimulating = this.loadingDialog.open('Simulating...');
+
+    try {
+      simulatedResultData = await this.gov.simulateToSubmitProposal(
+        privateWallet.key_type,
+        minimumGasPrice,
+        privateKey,
+      );
+      gas = simulatedResultData.estimatedGasUsedWithMargin;
+      fee = simulatedResultData.estimatedFeeWithMargin;
+    } catch (error) {
+      console.error(error);
+      const errorMessage = `Tx simulation failed: ${(error as Error).toString()}`;
+      this.snackBar.open(`An error has occur: ${errorMessage}`, 'Close');
+      return;
+    } finally {
+      dialogRefSimulating.close();
+    }
+
+    // ask the user to confirm the fee with a dialog
+    const txFeeConfirmedResult = await this.dialog
+      .open(TxFeeConfirmDialogComponent, {
+        data: {
+          fee,
+          isConfirmed: false,
+        },
+      })
+      .afterClosed()
+      .toPromise();
+
+    if (txFeeConfirmedResult === undefined || txFeeConfirmedResult.isConfirmed === false) {
+      this.snackBar.open('Tx was canceled', undefined, { duration: 6000 });
+      return;
+    }
+
+    const dialogRef = this.loadingDialog.open('Loading...');
+
+    let submitProposalResult: InlineResponse20075 | undefined;
+    let txHash: string | undefined;
+
+    try {
+      submitProposalResult = await this.gov.SubmitProposal(
+        privateWallet.key_type,
+        gas,
+        fee,
+        privateKey,
+      );
+      txHash = submitProposalResult.tx_response?.txhash;
+      if (txHash === undefined) {
+        throw Error('Invalid txHash!');
+      }
+    } catch (error) {
+      console.error(error);
+      const msg = (error as Error).toString();
+      this.snackBar.open(`An error has occur: ${msg}`, 'Close');
+      return;
+    } finally {
+      dialogRef.close();
+    }
+
+    this.snackBar.open('Successfully submit proposal', undefined, { duration: 6000 });
+
+    await this.router.navigate(['txs', txHash]);
+  }
+
+  async Vote(
+    proposalID: number,
+    voteOption: proto.cosmos.gov.v1beta1.VoteOption,
+    minimumGasPrice: proto.cosmos.base.v1beta1.ICoin,
+  ) {
+    const privateWallet: StoredWallet & { privateKey: string } =
+      await this.walletApplicationService.openUnunifiKeyFormDialog();
+    if (!privateWallet || !privateWallet.privateKey) {
+      this.snackBar.open('Failed to get Wallet info from dialog! Tray again!', 'Close');
+      return;
+    }
+
+    const privateKey = convertHexStringToUint8Array(privateWallet.privateKey);
+
+    if (!privateKey) {
+      this.snackBar.open('Invalid PrivateKey!', 'Close');
+      return;
+    }
+
+    // simulate
+    let simulatedResultData: SimulatedTxResultResponse;
+    let gas: proto.cosmos.base.v1beta1.ICoin;
+    let fee: proto.cosmos.base.v1beta1.ICoin;
+
+    const dialogRefSimulating = this.loadingDialog.open('Simulating...');
+
+    try {
+      simulatedResultData = await this.gov.simulateToVote(
+        privateWallet.key_type,
+        proposalID,
+        voteOption,
+        minimumGasPrice,
+        privateKey,
+      );
+      gas = simulatedResultData.estimatedGasUsedWithMargin;
+      fee = simulatedResultData.estimatedFeeWithMargin;
+    } catch (error) {
+      console.error(error);
+      const errorMessage = `Tx simulation failed: ${(error as Error).toString()}`;
+      this.snackBar.open(`An error has occur: ${errorMessage}`, 'Close');
+      return;
+    } finally {
+      dialogRefSimulating.close();
+    }
+
+    // ask the user to confirm the fee with a dialog
+    const txFeeConfirmedResult = await this.dialog
+      .open(TxFeeConfirmDialogComponent, {
+        data: {
+          fee,
+          isConfirmed: false,
+        },
+      })
+      .afterClosed()
+      .toPromise();
+
+    if (txFeeConfirmedResult === undefined || txFeeConfirmedResult.isConfirmed === false) {
+      this.snackBar.open('Tx was canceled', undefined, { duration: 6000 });
+      return;
+    }
+
+    const dialogRef = this.loadingDialog.open('Sending');
+
+    let voteResult: InlineResponse20075 | undefined;
+    let txHash: string | undefined;
+
+    try {
+      voteResult = await this.gov.Vote(
+        privateWallet.key_type,
+        proposalID,
+        voteOption,
+        gas,
+        fee,
+        privateKey,
+      );
+      txHash = voteResult.tx_response?.txhash;
+      if (txHash === undefined) {
+        throw Error('Invalid txHash!');
+      }
+    } catch (error) {
+      console.error(error);
+      const msg = (error as Error).toString();
+      this.snackBar.open(`An error has occur: ${msg}`, 'Close');
+      return;
+    } finally {
+      dialogRef.close();
+    }
+
+    this.snackBar.open('Successfully vote the proposal', undefined, { duration: 6000 });
+    await this.router.navigate(['txs', txHash]);
+  }
+
+  async Deposit(
+    proposalID: number,
+    amount: proto.cosmos.base.v1beta1.ICoin,
+    minimumGasPrice: proto.cosmos.base.v1beta1.ICoin,
+  ) {
+    const privateWallet: StoredWallet & { privateKey: string } =
+      await this.walletApplicationService.openUnunifiKeyFormDialog();
+    if (!privateWallet || !privateWallet.privateKey) {
+      this.snackBar.open('Failed to get Wallet info from dialog! Tray again!', 'Close');
+      return;
+    }
+
+    const privateKey = convertHexStringToUint8Array(privateWallet.privateKey);
+
+    if (!privateKey) {
+      this.snackBar.open('Invalid PrivateKey!', 'Close');
+      return;
+    }
+
+    // simulate
+    let simulatedResultData: SimulatedTxResultResponse;
+    let gas: proto.cosmos.base.v1beta1.ICoin;
+    let fee: proto.cosmos.base.v1beta1.ICoin;
+
+    const dialogRefSimulating = this.loadingDialog.open('Simulating...');
+
+    try {
+      simulatedResultData = await this.gov.simulateToDeposit(
+        privateWallet.key_type,
+        proposalID,
+        amount,
+        minimumGasPrice,
+        privateKey,
+      );
+      gas = simulatedResultData.estimatedGasUsedWithMargin;
+      fee = simulatedResultData.estimatedFeeWithMargin;
+    } catch (error) {
+      console.error(error);
+      const errorMessage = `Tx simulation failed: ${(error as Error).toString()}`;
+      this.snackBar.open(`An error has occur: ${errorMessage}`, 'Close');
+      return;
+    } finally {
+      dialogRefSimulating.close();
+    }
+
+    // ask the user to confirm the fee with a dialog
+    const txFeeConfirmedResult = await this.dialog
+      .open(TxFeeConfirmDialogComponent, {
+        data: {
+          fee,
+          isConfirmed: false,
+        },
+      })
+      .afterClosed()
+      .toPromise();
+
+    if (txFeeConfirmedResult === undefined || txFeeConfirmedResult.isConfirmed === false) {
+      this.snackBar.open('Tx was canceled', undefined, { duration: 6000 });
+      return;
+    }
+
+    const dialogRef = this.loadingDialog.open('Sending');
+
+    let depositResult: InlineResponse20075 | undefined;
+    let txHash: string | undefined;
+
+    try {
+      depositResult = await this.gov.Deposit(
+        privateWallet.key_type,
+        proposalID,
+        amount,
+        gas,
+        fee,
+        privateKey,
+      );
+      txHash = depositResult.tx_response?.txhash;
+      if (txHash === undefined) {
+        throw Error('Invalid txHash!');
+      }
+    } catch (error) {
+      console.error(error);
+      const msg = (error as Error).toString();
+      this.snackBar.open(`An error has occur: ${msg}`, 'Close');
+      return;
+    } finally {
+      dialogRef.close();
+    }
+
+    this.snackBar.open('Successfully deposit the proposal', undefined, { duration: 6000 });
+
+    return txHash;
+    // await this.router.navigate(['txs', txHash]);
+  }
+}
diff --git a/projects/portal/src/app/models/cosmos/gov.service.ts b/projects/portal/src/app/models/cosmos/gov.service.ts
new file mode 100644
index 000000000..0b8ebf00a
--- /dev/null
+++ b/projects/portal/src/app/models/cosmos/gov.service.ts
@@ -0,0 +1,332 @@
+import { CosmosSDKService } from '../cosmos-sdk.service';
+import { KeyType } from '../keys/key.model';
+import { KeyService } from '../keys/key.service';
+import { SimulatedTxResultResponse } from './tx-common.model';
+import { TxCommonService } from './tx-common.service';
+import { Injectable } from '@angular/core';
+import { cosmosclient, rest, proto } from '@cosmos-client/core';
+import { InlineResponse20075 } from '@cosmos-client/core/esm/openapi';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GovService {
+  constructor(
+    private readonly cosmosSDK: CosmosSDKService,
+    private readonly key: KeyService,
+    private readonly txCommonService: TxCommonService,
+  ) {}
+
+  // WIP Submit Proposal
+  async SubmitProposal(
+    keyType: KeyType,
+    gas: proto.cosmos.base.v1beta1.ICoin,
+    fee: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<InlineResponse20075> {
+    const txBuilder = await this.buildSubmitProposal(keyType, gas, fee, privateKey);
+    return await this.txCommonService.announceTx(txBuilder);
+  }
+
+  async simulateToSubmitProposal(
+    keyType: KeyType,
+    minimumGasPrice: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<SimulatedTxResultResponse> {
+    const dummyFee: proto.cosmos.base.v1beta1.ICoin = {
+      denom: minimumGasPrice.denom,
+      amount: '1',
+    };
+    const dummyGas: proto.cosmos.base.v1beta1.ICoin = {
+      denom: minimumGasPrice.denom,
+      amount: '1',
+    };
+    const simulatedTxBuilder = await this.buildSubmitProposal(
+      keyType,
+      dummyGas,
+      dummyFee,
+      privateKey,
+    );
+    return await this.txCommonService.simulateTx(simulatedTxBuilder, minimumGasPrice);
+  }
+
+  async buildSubmitProposal(
+    keyType: KeyType,
+    gas: proto.cosmos.base.v1beta1.ICoin,
+    fee: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<cosmosclient.TxBuilder> {
+    const sdk = await this.cosmosSDK.sdk().then((sdk) => sdk.rest);
+    const privKey = this.key.getPrivKey(keyType, privateKey);
+    if (!privKey) {
+      throw Error('Invalid privateKey!');
+    }
+    const pubKey = privKey.pubKey();
+    const fromAddress = cosmosclient.AccAddress.fromPublicKey(pubKey);
+
+    // get account info
+    const account = await rest.auth
+      .account(sdk, fromAddress)
+      .then(
+        (res) =>
+          res.data.account &&
+          (cosmosclient.codec.unpackCosmosAny(
+            res.data.account,
+          ) as proto.cosmos.auth.v1beta1.BaseAccount),
+      )
+      .catch((_) => undefined);
+
+    if (!(account instanceof proto.cosmos.auth.v1beta1.BaseAccount)) {
+      throw Error('Address not found');
+    }
+
+    // build tx
+    const msgProposal = new proto.cosmos.gov.v1beta1.MsgSubmitProposal({
+      content: null,
+      initial_deposit: [],
+      proposer: fromAddress.toString(),
+    });
+
+    const txBody = new proto.cosmos.tx.v1beta1.TxBody({
+      messages: [cosmosclient.codec.packAny(msgProposal)],
+    });
+    const authInfo = new proto.cosmos.tx.v1beta1.AuthInfo({
+      signer_infos: [
+        {
+          public_key: cosmosclient.codec.packAny(pubKey),
+          mode_info: {
+            single: {
+              mode: proto.cosmos.tx.signing.v1beta1.SignMode.SIGN_MODE_DIRECT,
+            },
+          },
+          sequence: account.sequence,
+        },
+      ],
+      fee: {
+        amount: [fee],
+        gas_limit: cosmosclient.Long.fromString(gas.amount ? gas.amount : '200000'),
+      },
+    });
+
+    // sign
+    const txBuilder = new cosmosclient.TxBuilder(sdk, txBody, authInfo);
+    const signDocBytes = txBuilder.signDocBytes(account.account_number);
+    txBuilder.addSignature(privKey.sign(signDocBytes));
+
+    return txBuilder;
+  }
+
+  // Vote
+  async Vote(
+    keyType: KeyType,
+    proposalID: number,
+    voteOption: proto.cosmos.gov.v1beta1.VoteOption,
+    gas: proto.cosmos.base.v1beta1.ICoin,
+    fee: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<InlineResponse20075> {
+    const txBuilder = await this.buildVote(keyType, proposalID, voteOption, gas, fee, privateKey);
+    return await this.txCommonService.announceTx(txBuilder);
+  }
+
+  async simulateToVote(
+    keyType: KeyType,
+    proposalID: number,
+    voteOption: proto.cosmos.gov.v1beta1.VoteOption,
+    minimumGasPrice: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<SimulatedTxResultResponse> {
+    const dummyFee: proto.cosmos.base.v1beta1.ICoin = {
+      denom: minimumGasPrice.denom,
+      amount: '1',
+    };
+    const dummyGas: proto.cosmos.base.v1beta1.ICoin = {
+      denom: minimumGasPrice.denom,
+      amount: '1',
+    };
+    const simulatedTxBuilder = await this.buildVote(
+      keyType,
+      proposalID,
+      voteOption,
+      dummyGas,
+      dummyFee,
+      privateKey,
+    );
+    return await this.txCommonService.simulateTx(simulatedTxBuilder, minimumGasPrice);
+  }
+
+  async buildVote(
+    keyType: KeyType,
+    proposalID: number,
+    voteOption: proto.cosmos.gov.v1beta1.VoteOption,
+    gas: proto.cosmos.base.v1beta1.ICoin,
+    fee: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<cosmosclient.TxBuilder> {
+    const sdk = await this.cosmosSDK.sdk().then((sdk) => sdk.rest);
+    const privKey = this.key.getPrivKey(keyType, privateKey);
+    if (!privKey) {
+      throw Error('Invalid privateKey!');
+    }
+    const pubKey = privKey.pubKey();
+    const fromAddress = cosmosclient.AccAddress.fromPublicKey(pubKey);
+
+    // get account info
+    const account = await rest.auth
+      .account(sdk, fromAddress)
+      .then(
+        (res) =>
+          res.data.account &&
+          (cosmosclient.codec.unpackCosmosAny(
+            res.data.account,
+          ) as proto.cosmos.auth.v1beta1.BaseAccount),
+      )
+      .catch((_) => undefined);
+
+    if (!(account instanceof proto.cosmos.auth.v1beta1.BaseAccount)) {
+      throw Error('Address not found');
+    }
+
+    // build tx
+    const msgVote = new proto.cosmos.gov.v1beta1.MsgVote({
+      proposal_id: cosmosclient.Long.fromNumber(proposalID),
+      voter: fromAddress.toString(),
+      option: voteOption,
+    });
+
+    const txBody = new proto.cosmos.tx.v1beta1.TxBody({
+      messages: [cosmosclient.codec.packAny(msgVote)],
+    });
+    const authInfo = new proto.cosmos.tx.v1beta1.AuthInfo({
+      signer_infos: [
+        {
+          public_key: cosmosclient.codec.packAny(pubKey),
+          mode_info: {
+            single: {
+              mode: proto.cosmos.tx.signing.v1beta1.SignMode.SIGN_MODE_DIRECT,
+            },
+          },
+          sequence: account.sequence,
+        },
+      ],
+      fee: {
+        amount: [fee],
+        gas_limit: cosmosclient.Long.fromString(gas.amount ? gas.amount : '200000'),
+      },
+    });
+
+    // sign
+    const txBuilder = new cosmosclient.TxBuilder(sdk, txBody, authInfo);
+    const signDocBytes = txBuilder.signDocBytes(account.account_number);
+    txBuilder.addSignature(privKey.sign(signDocBytes));
+
+    return txBuilder;
+  }
+
+  // Deposit
+  async Deposit(
+    keyType: KeyType,
+    proposalID: number,
+    amount: proto.cosmos.base.v1beta1.ICoin,
+    gas: proto.cosmos.base.v1beta1.ICoin,
+    fee: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<InlineResponse20075> {
+    const txBuilder = await this.buildDeposit(keyType, proposalID, amount, gas, fee, privateKey);
+    return await this.txCommonService.announceTx(txBuilder);
+  }
+
+  async simulateToDeposit(
+    keyType: KeyType,
+    proposalID: number,
+    amount: proto.cosmos.base.v1beta1.ICoin,
+    minimumGasPrice: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<SimulatedTxResultResponse> {
+    const dummyFee: proto.cosmos.base.v1beta1.ICoin = {
+      denom: minimumGasPrice.denom,
+      amount: '1',
+    };
+    const dummyGas: proto.cosmos.base.v1beta1.ICoin = {
+      denom: minimumGasPrice.denom,
+      amount: '1',
+    };
+    const simulatedTxBuilder = await this.buildDeposit(
+      keyType,
+      proposalID,
+      amount,
+      dummyGas,
+      dummyFee,
+      privateKey,
+    );
+    return await this.txCommonService.simulateTx(simulatedTxBuilder, minimumGasPrice);
+  }
+
+  async buildDeposit(
+    keyType: KeyType,
+    proposalID: number,
+    amount: proto.cosmos.base.v1beta1.ICoin,
+    gas: proto.cosmos.base.v1beta1.ICoin,
+    fee: proto.cosmos.base.v1beta1.ICoin,
+    privateKey: Uint8Array,
+  ): Promise<cosmosclient.TxBuilder> {
+    const sdk = await this.cosmosSDK.sdk().then((sdk) => sdk.rest);
+    const privKey = this.key.getPrivKey(keyType, privateKey);
+    if (!privKey) {
+      throw Error('Invalid privateKey!');
+    }
+    const pubKey = privKey.pubKey();
+    const fromAddress = cosmosclient.AccAddress.fromPublicKey(pubKey);
+
+    // get account info
+    const account = await rest.auth
+      .account(sdk, fromAddress)
+      .then(
+        (res) =>
+          res.data.account &&
+          (cosmosclient.codec.unpackCosmosAny(
+            res.data.account,
+          ) as proto.cosmos.auth.v1beta1.BaseAccount),
+      )
+      .catch((_) => undefined);
+
+    if (!(account instanceof proto.cosmos.auth.v1beta1.BaseAccount)) {
+      throw Error('Address not found');
+    }
+
+    // build tx
+    const msgDeposit = new proto.cosmos.gov.v1beta1.MsgDeposit({
+      proposal_id: cosmosclient.Long.fromNumber(proposalID),
+      depositor: fromAddress.toString(),
+      amount: [amount],
+    });
+
+    const txBody = new proto.cosmos.tx.v1beta1.TxBody({
+      messages: [cosmosclient.codec.packAny(msgDeposit)],
+    });
+    const authInfo = new proto.cosmos.tx.v1beta1.AuthInfo({
+      signer_infos: [
+        {
+          public_key: cosmosclient.codec.packAny(pubKey),
+          mode_info: {
+            single: {
+              mode: proto.cosmos.tx.signing.v1beta1.SignMode.SIGN_MODE_DIRECT,
+            },
+          },
+          sequence: account.sequence,
+        },
+      ],
+      fee: {
+        amount: [fee],
+        gas_limit: cosmosclient.Long.fromString(gas.amount ? gas.amount : '200000'),
+      },
+    });
+
+    // sign
+    const txBuilder = new cosmosclient.TxBuilder(sdk, txBody, authInfo);
+    const signDocBytes = txBuilder.signDocBytes(account.account_number);
+    txBuilder.addSignature(privKey.sign(signDocBytes));
+
+    return txBuilder;
+  }
+}
diff --git a/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.css b/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.html b/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.html
new file mode 100644
index 000000000..77ed5b3c0
--- /dev/null
+++ b/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.html
@@ -0,0 +1,9 @@
+<view-deposit-form-dialog
+  [proposal]="proposal$ | async"
+  [currentStoredWallet]="currentStoredWallet$ | async"
+  [coins]="coins$ | async"
+  [uguuBalance]="uguuBalance$ | async"
+  [minimumGasPrices]="minimumGasPrices$ | async"
+  [proposalID]="proposalID"
+  (appSubmit)="onSubmit($event)"
+></view-deposit-form-dialog>
diff --git a/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.ts b/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.ts
new file mode 100644
index 000000000..87e030b67
--- /dev/null
+++ b/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.component.ts
@@ -0,0 +1,78 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { cosmosclient, proto, rest } from '@cosmos-client/core';
+import { InlineResponse20052Proposals } from '@cosmos-client/core/esm/openapi';
+import { CosmosSDKService } from 'projects/portal/src/app/models';
+import { ConfigService } from 'projects/portal/src/app/models/config.service';
+import { GovApplicationService } from 'projects/portal/src/app/models/cosmos/gov.application.service';
+import { StoredWallet } from 'projects/portal/src/app/models/wallets/wallet.model';
+import { WalletService } from 'projects/portal/src/app/models/wallets/wallet.service';
+import { DepositOnSubmitEvent } from 'projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component';
+import { combineLatest, Observable, of } from 'rxjs';
+import { catchError, filter, map, mergeMap } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-deposit-form-dialog',
+  templateUrl: './deposit-form-dialog.component.html',
+  styleUrls: ['./deposit-form-dialog.component.css'],
+})
+export class DepositFormDialogComponent implements OnInit {
+  proposal$: Observable<InlineResponse20052Proposals | undefined>;
+  currentStoredWallet$: Observable<StoredWallet | null | undefined>;
+  coins$: Observable<proto.cosmos.base.v1beta1.ICoin[] | undefined>;
+  uguuBalance$: Observable<string> | undefined;
+  minimumGasPrices$: Observable<proto.cosmos.base.v1beta1.ICoin[] | undefined>;
+  proposalID: number | undefined;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public readonly data: number,
+    public matDialogRef: MatDialogRef<DepositFormDialogComponent>,
+    private readonly cosmosSDK: CosmosSDKService,
+    private readonly walletService: WalletService,
+    private readonly configS: ConfigService,
+    private readonly govAppService: GovApplicationService,
+  ) {
+    this.proposalID = data;
+    this.proposal$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.proposal(sdk.rest, String(this.proposalID))),
+      map((result) => result.data.proposal!),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
+    this.currentStoredWallet$ = this.walletService.currentStoredWallet$;
+    const address$ = this.currentStoredWallet$.pipe(
+      filter((wallet): wallet is StoredWallet => wallet !== undefined && wallet !== null),
+      map((wallet) => cosmosclient.AccAddress.fromString(wallet.address)),
+    );
+
+    this.coins$ = combineLatest([this.cosmosSDK.sdk$, address$]).pipe(
+      mergeMap(([sdk, address]) => rest.bank.allBalances(sdk.rest, address)),
+      map((result) => result.data.balances),
+    );
+    this.uguuBalance$ = this.coins$.pipe(
+      map((coins) => {
+        const balance = coins?.find((coin) => coin.denom == 'uguu');
+        return balance ? balance.amount! : '0';
+      }),
+    );
+
+    this.minimumGasPrices$ = this.configS.config$.pipe(map((config) => config?.minimumGasPrices));
+  }
+
+  ngOnInit(): void {}
+
+  async onSubmit($event: DepositOnSubmitEvent) {
+    if (!this.proposalID) {
+      return;
+    }
+    const txHash = await this.govAppService.Deposit(
+      this.proposalID,
+      $event.amount,
+      $event.minimumGasPrice,
+    );
+    this.matDialogRef.close(txHash);
+  }
+}
diff --git a/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.module.ts b/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.module.ts
new file mode 100644
index 000000000..9b879d81b
--- /dev/null
+++ b/projects/portal/src/app/pages/dialogs/vote/deposit-form-dialog/deposit-form-dialog.module.ts
@@ -0,0 +1,10 @@
+import { DepositFormDialogComponent } from './deposit-form-dialog.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DepositFormDialogModule } from 'projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.module';
+
+@NgModule({
+  declarations: [DepositFormDialogComponent],
+  imports: [CommonModule, DepositFormDialogModule],
+})
+export class AppDepositFormDialogModule {}
diff --git a/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.css b/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.html b/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.html
new file mode 100644
index 000000000..d8d3469e8
--- /dev/null
+++ b/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.html
@@ -0,0 +1,12 @@
+<view-vote-form-dialog
+  [proposal]="proposal$ | async"
+  [currentStoredWallet]="currentStoredWallet$ | async"
+  [coins]="coins$ | async"
+  [uguuBalance]="uguuBalance$ | async"
+  [minimumGasPrices]="minimumGasPrices$ | async"
+  [proposalID]="proposalID"
+  (appSubmitYes)="onSubmitYes($event)"
+  (appSubmitNoWithVeto)="onSubmitNoWithVeto($event)"
+  (appSubmitNo)="onSubmitNo($event)"
+  (appSubmitAbstain)="onSubmitAbstain($event)"
+></view-vote-form-dialog>
diff --git a/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.ts b/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.ts
new file mode 100644
index 000000000..637d82da4
--- /dev/null
+++ b/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.component.ts
@@ -0,0 +1,110 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { cosmosclient, proto, rest } from '@cosmos-client/core';
+import { InlineResponse20052Proposals } from '@cosmos-client/core/esm/openapi';
+import { CosmosSDKService } from 'projects/portal/src/app/models';
+import { ConfigService } from 'projects/portal/src/app/models/config.service';
+import { GovApplicationService } from 'projects/portal/src/app/models/cosmos/gov.application.service';
+import { StoredWallet } from 'projects/portal/src/app/models/wallets/wallet.model';
+import { WalletService } from 'projects/portal/src/app/models/wallets/wallet.service';
+import { combineLatest, Observable, of } from 'rxjs';
+import { catchError, filter, map, mergeMap } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-vote-form-dialog',
+  templateUrl: './vote-form-dialog.component.html',
+  styleUrls: ['./vote-form-dialog.component.css'],
+})
+export class VoteFormDialogComponent implements OnInit {
+  proposal$: Observable<InlineResponse20052Proposals | undefined>;
+  currentStoredWallet$: Observable<StoredWallet | null | undefined>;
+  coins$: Observable<proto.cosmos.base.v1beta1.ICoin[] | undefined>;
+  uguuBalance$: Observable<string> | undefined;
+  minimumGasPrices$: Observable<proto.cosmos.base.v1beta1.ICoin[] | undefined>;
+  proposalID: number | undefined;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public readonly data: number,
+    public matDialogRef: MatDialogRef<VoteFormDialogComponent>,
+    private readonly cosmosSDK: CosmosSDKService,
+    private readonly walletService: WalletService,
+    private readonly configS: ConfigService,
+    private readonly govAppService: GovApplicationService,
+  ) {
+    this.proposalID = data;
+    this.proposal$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.proposal(sdk.rest, String(this.proposalID))),
+      map((result) => result.data.proposal!),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
+    this.currentStoredWallet$ = this.walletService.currentStoredWallet$;
+    const address$ = this.currentStoredWallet$.pipe(
+      filter((wallet): wallet is StoredWallet => wallet !== undefined && wallet !== null),
+      map((wallet) => cosmosclient.AccAddress.fromString(wallet.address)),
+    );
+
+    this.coins$ = combineLatest([this.cosmosSDK.sdk$, address$]).pipe(
+      mergeMap(([sdk, address]) => rest.bank.allBalances(sdk.rest, address)),
+      map((result) => result.data.balances),
+    );
+    this.uguuBalance$ = this.coins$.pipe(
+      map((coins) => {
+        const balance = coins?.find((coin) => coin.denom == 'uguu');
+        return balance ? balance.amount! : '0';
+      }),
+    );
+
+    this.minimumGasPrices$ = this.configS.config$.pipe(map((config) => config?.minimumGasPrices));
+  }
+
+  ngOnInit(): void {}
+
+  async onSubmitYes(gasPrice: proto.cosmos.base.v1beta1.ICoin) {
+    if (!this.proposalID) {
+      return;
+    }
+    const txHash = await this.govAppService.Vote(
+      this.proposalID,
+      proto.cosmos.gov.v1beta1.VoteOption.VOTE_OPTION_YES,
+      gasPrice,
+    );
+    this.matDialogRef.close(txHash);
+  }
+  async onSubmitNoWithVeto(gasPrice: proto.cosmos.base.v1beta1.ICoin) {
+    if (!this.proposalID) {
+      return;
+    }
+    const txHash = await this.govAppService.Vote(
+      this.proposalID,
+      proto.cosmos.gov.v1beta1.VoteOption.VOTE_OPTION_NO_WITH_VETO,
+      gasPrice,
+    );
+    this.matDialogRef.close(txHash);
+  }
+  async onSubmitNo(gasPrice: proto.cosmos.base.v1beta1.ICoin) {
+    if (!this.proposalID) {
+      return;
+    }
+    const txHash = await this.govAppService.Vote(
+      this.proposalID,
+      proto.cosmos.gov.v1beta1.VoteOption.VOTE_OPTION_NO,
+      gasPrice,
+    );
+    this.matDialogRef.close(txHash);
+  }
+  async onSubmitAbstain(minimumGasPrice: proto.cosmos.base.v1beta1.ICoin) {
+    if (!this.proposalID) {
+      return;
+    }
+    const txHash = await this.govAppService.Vote(
+      this.proposalID,
+      proto.cosmos.gov.v1beta1.VoteOption.VOTE_OPTION_ABSTAIN,
+      minimumGasPrice,
+    );
+    this.matDialogRef.close(txHash);
+  }
+}
diff --git a/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.module.ts b/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.module.ts
new file mode 100644
index 000000000..0a6756338
--- /dev/null
+++ b/projects/portal/src/app/pages/dialogs/vote/vote-form-dialog/vote-form-dialog.module.ts
@@ -0,0 +1,10 @@
+import { VoteFormDialogComponent } from './vote-form-dialog.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { VoteFormDialogModule } from 'projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.module';
+
+@NgModule({
+  declarations: [VoteFormDialogComponent],
+  imports: [CommonModule, VoteFormDialogModule],
+})
+export class AppVoteFormDialogModule {}
diff --git a/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.html b/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.html
index 6970de389..692b3b4eb 100644
--- a/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.html
+++ b/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.html
@@ -1 +1,12 @@
-<view-proposal [proposal]="proposal$ | async" [deposits]="deposits$ | async" [tally]="tally$ | async" [votes]="votes$ | async"></view-proposal>
+<view-proposal
+  [proposal]="proposal$ | async"
+  [proposalType]="proposalType$ | async"
+  [deposits]="deposits$ | async"
+  [depositParams]="depositParams$ | async"
+  [tally]="tally$ | async"
+  [tallyParams]="tallyParams$ | async"
+  [votes]="votes$ | async"
+  [votingParams]="votingParams$ | async"
+  (appClickVote)="onVoteProposal($event)"
+  (appClickDeposit)="onDepositProposal($event)"
+></view-proposal>
diff --git a/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.ts b/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.ts
index 55364644f..e97b84c5c 100644
--- a/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.ts
+++ b/projects/portal/src/app/pages/vote/proposals/proposal/proposal.component.ts
@@ -6,8 +6,12 @@ import {
   InlineResponse20054Deposits,
   InlineResponse20052FinalTallyResult,
   InlineResponse20057Votes,
+  InlineResponse20051DepositParams,
+  InlineResponse20051TallyParams,
+  InlineResponse20051VotingParams,
 } from '@cosmos-client/core/esm/openapi';
 import { CosmosSDKService } from 'projects/explorer/src/app/models/cosmos-sdk.service';
+import { GovApplicationService } from 'projects/portal/src/app/models/cosmos/gov.application.service';
 import { combineLatest, Observable, of } from 'rxjs';
 import { catchError, map, mergeMap } from 'rxjs/operators';
 
@@ -18,24 +22,39 @@ import { catchError, map, mergeMap } from 'rxjs/operators';
 })
 export class ProposalComponent implements OnInit {
   proposal$: Observable<InlineResponse20052Proposals | undefined>;
+  proposalType$: Observable<string | undefined>;
   deposits$: Observable<InlineResponse20054Deposits[] | undefined>;
+  depositParams$: Observable<InlineResponse20051DepositParams | undefined>;
   tally$: Observable<InlineResponse20052FinalTallyResult | undefined>;
+  tallyParams$: Observable<InlineResponse20051TallyParams | undefined>;
   votes$: Observable<InlineResponse20057Votes[] | undefined>;
+  votingParams$: Observable<InlineResponse20051VotingParams | undefined>;
 
-  constructor(private route: ActivatedRoute, private cosmosSDK: CosmosSDKService) {
+  constructor(
+    private route: ActivatedRoute,
+    private cosmosSDK: CosmosSDKService,
+    private readonly govAppService: GovApplicationService,
+  ) {
     const proposalID$ = this.route.params.pipe(map((params) => params.id));
-    console.log('proposalID');
-    console.log(proposalID$);
 
     const combined$ = combineLatest([this.cosmosSDK.sdk$, proposalID$]);
     this.proposal$ = combined$.pipe(
-      mergeMap(([sdk, address]) => rest.gov.proposal(sdk.rest, address)),
+      mergeMap(([sdk, id]) => rest.gov.proposal(sdk.rest, id)),
       map((result) => result.data.proposal!),
       catchError((error) => {
         console.error(error);
         return of(undefined);
       }),
     );
+    this.proposal$.subscribe((a) => console.log(a));
+
+    this.proposalType$ = this.proposal$.pipe(
+      map((proposal) => {
+        if (proposal && proposal.content) {
+          return (proposal.content as any)['@type'];
+        }
+      }),
+    );
 
     this.deposits$ = combined$.pipe(
       mergeMap(([sdk, address]) => rest.gov.deposits(sdk.rest, address)),
@@ -46,6 +65,11 @@ export class ProposalComponent implements OnInit {
       }),
     );
 
+    this.depositParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'deposit')),
+      map((result) => result.data.deposit_params),
+    );
+
     this.tally$ = combined$.pipe(
       mergeMap(([sdk, address]) => rest.gov.tallyresult(sdk.rest, address)),
       map((result) => result.data.tally!),
@@ -55,6 +79,15 @@ export class ProposalComponent implements OnInit {
       }),
     );
 
+    this.tallyParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'tallying')),
+      map((result) => result.data.tally_params),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
+
     this.votes$ = combined$.pipe(
       mergeMap(([sdk, address]) => rest.gov.votes(sdk.rest, address)),
       map((result) => result.data.votes!),
@@ -63,7 +96,24 @@ export class ProposalComponent implements OnInit {
         return of(undefined);
       }),
     );
+
+    this.votingParams$ = this.cosmosSDK.sdk$.pipe(
+      mergeMap((sdk) => rest.gov.params(sdk.rest, 'voting')),
+      map((result) => result.data.voting_params),
+      catchError((error) => {
+        console.error(error);
+        return of(undefined);
+      }),
+    );
   }
 
   ngOnInit(): void {}
+
+  onVoteProposal(proposalID: number) {
+    this.govAppService.openVoteFormDialog(proposalID);
+  }
+
+  onDepositProposal(proposalID: number) {
+    this.govAppService.openDepositFormDialog(proposalID);
+  }
 }
diff --git a/projects/portal/src/app/pages/vote/proposals/proposals.component.html b/projects/portal/src/app/pages/vote/proposals/proposals.component.html
index 5fc23b97f..f5b1bad39 100644
--- a/projects/portal/src/app/pages/vote/proposals/proposals.component.html
+++ b/projects/portal/src/app/pages/vote/proposals/proposals.component.html
@@ -1 +1,4 @@
-<view-proposals [proposals]="proposals$ | async"></view-proposals>
+<view-proposals
+  [proposals]="proposals$ | async"
+  (appClickVote)="onVoteProposal($event)"
+></view-proposals>
diff --git a/projects/portal/src/app/pages/vote/proposals/proposals.component.ts b/projects/portal/src/app/pages/vote/proposals/proposals.component.ts
index ccccb9537..ee3e0b7a0 100644
--- a/projects/portal/src/app/pages/vote/proposals/proposals.component.ts
+++ b/projects/portal/src/app/pages/vote/proposals/proposals.component.ts
@@ -1,3 +1,4 @@
+import { GovApplicationService } from '../../../models/cosmos/gov.application.service';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { rest } from '@cosmos-client/core';
@@ -17,6 +18,7 @@ export class ProposalsComponent implements OnInit {
   constructor(
     private readonly route: ActivatedRoute,
     private readonly cosmosSDK: CosmosSDKService,
+    private readonly govAppService: GovApplicationService,
   ) {
     this.proposals$ = this.cosmosSDK.sdk$.pipe(
       mergeMap((sdk) => rest.gov.proposals(sdk.rest)),
@@ -25,4 +27,8 @@ export class ProposalsComponent implements OnInit {
   }
 
   ngOnInit(): void {}
+
+  onVoteProposal(proposalID: number) {
+    this.govAppService.openVoteFormDialog(proposalID);
+  }
 }
diff --git a/projects/portal/src/app/pages/vote/vote-routing.module.ts b/projects/portal/src/app/pages/vote/vote-routing.module.ts
index d13cdd99e..f97613c70 100644
--- a/projects/portal/src/app/pages/vote/vote-routing.module.ts
+++ b/projects/portal/src/app/pages/vote/vote-routing.module.ts
@@ -11,7 +11,7 @@ const routes: Routes = [
     canActivate: [WalletGuard],
   },
   {
-    path: 'proposals/:address',
+    path: 'proposals/:id',
     component: ProposalComponent,
     canActivate: [WalletGuard],
   },
diff --git a/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.css b/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.html b/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.html
new file mode 100644
index 000000000..6bfd4d830
--- /dev/null
+++ b/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.html
@@ -0,0 +1,111 @@
+<div class="flex flex-col items-center">
+  <img class="m-6 w-12 h-12" src="assets/favicon.png" alt="UnUniFi logo" />
+  <div class="font-bold text-xl m-3">Deposit to this proposal</div>
+</div>
+<ng-container *ngIf="unpackContent(proposal?.content) as content">
+  <mat-list>
+    <mat-list-item>
+      <div mat-line>
+        <span># {{ proposal?.proposal_id }} {{ content.title }}</span>
+      </div>
+    </mat-list-item>
+  </mat-list>
+</ng-container>
+
+<mat-list>
+  <mat-label>Depositor</mat-label>
+  <mat-list-item>
+    <mat-icon matListIcon [ngStyle]="{ color: getColorCode(currentStoredWallet?.address!) }"
+      >circle</mat-icon
+    >
+    <div mat-line>
+      <span>{{ currentStoredWallet?.address }}</span>
+    </div>
+  </mat-list-item>
+</mat-list>
+
+<form #formRef="ngForm" (submit)="onSubmit()">
+  <div class="flex flex-row content-content items-end">
+    <mat-form-field class="flex-auto">
+      <mat-label>Deposit Denom</mat-label>
+      <input
+        [(ngModel)]="selectedAmount && selectedAmount.denom"
+        name="deposit-denom"
+        matInput
+        type="text"
+        required
+        readonly
+      />
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Deposit Amount</mat-label>
+      <input
+        [(ngModel)]="selectedAmount && selectedAmount.amount"
+        name="deposit-amount"
+        matInput
+        type="number"
+        pattern="^\d+$"
+        [min]="0"
+        required
+      />
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Balance</mat-label>
+      <input
+        [(ngModel)]="uguuBalance"
+        name="deposit-balance"
+        matInput
+        type="number"
+        pattern="^\d+$"
+        [min]="0"
+        required
+        readonly
+      />
+    </mat-form-field>
+  </div>
+
+  <h3 class="pt-3">Gas Settings</h3>
+  <div class="flex flex-row content-content items-end">
+    <mat-form-field class="flex-auto">
+      <mat-label>Minimum Gas Denom</mat-label>
+      <mat-select
+        [(ngModel)]="selectedGasPrice && selectedGasPrice.denom"
+        name="minimum-gas-denom"
+        required
+        (valueChange)="onMinimumGasDenomChanged($event)"
+      >
+        <mat-option
+          *ngFor="let minimumGasPriceOption of minimumGasPrices"
+          [value]="minimumGasPriceOption.denom"
+        >
+          {{ minimumGasPriceOption.denom }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Minimum Gas Price</mat-label>
+      <input
+        [(ngModel)]="selectedGasPrice && selectedGasPrice.amount"
+        #minimumGasPriceRef
+        name="minimum-gas-price"
+        matInput
+        type="number"
+        [min]="0"
+        required
+      />
+    </mat-form-field>
+  </div>
+  <mat-slider
+    class="w-full"
+    [max]="1"
+    [min]="0"
+    [step]="0.015"
+    [(ngModel)]="selectedGasPrice && selectedGasPrice.amount"
+    name="minimum-gas-price-slider"
+  >
+  </mat-slider>
+
+  <button mat-flat-button class="w-full" color="accent" [disabled]="formRef.invalid">
+    Deposit
+  </button>
+</form>
diff --git a/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.ts b/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.ts
new file mode 100644
index 000000000..ddb634e9f
--- /dev/null
+++ b/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.component.ts
@@ -0,0 +1,94 @@
+import { ProposalContent } from '../../../vote/proposals/proposals.component';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { cosmosclient, proto } from '@cosmos-client/core';
+import { InlineResponse20052Proposals } from '@cosmos-client/core/esm/openapi';
+import * as crypto from 'crypto';
+import { StoredWallet } from 'projects/portal/src/app/models/wallets/wallet.model';
+
+export type DepositOnSubmitEvent = {
+  amount: proto.cosmos.base.v1beta1.ICoin;
+  minimumGasPrice: proto.cosmos.base.v1beta1.ICoin;
+};
+
+@Component({
+  selector: 'view-deposit-form-dialog',
+  templateUrl: './deposit-form-dialog.component.html',
+  styleUrls: ['./deposit-form-dialog.component.css'],
+})
+export class DepositFormDialogComponent implements OnInit {
+  @Input()
+  proposal?: InlineResponse20052Proposals | null;
+  @Input()
+  currentStoredWallet?: StoredWallet | null;
+  @Input()
+  coins?: proto.cosmos.base.v1beta1.ICoin[] | null;
+  @Input()
+  uguuBalance?: string | null;
+  @Input()
+  minimumGasPrices?: proto.cosmos.base.v1beta1.ICoin[] | null;
+  @Input()
+  proposalID?: number | null;
+
+  @Output()
+  appSubmit: EventEmitter<DepositOnSubmitEvent>;
+
+  selectedGasPrice?: proto.cosmos.base.v1beta1.ICoin;
+  availableDenoms?: string[];
+  selectedAmount?: proto.cosmos.base.v1beta1.ICoin;
+
+  constructor() {
+    this.appSubmit = new EventEmitter();
+    // this.availableDenoms = this.coins?.map((coin) => coin.denom!);
+    this.availableDenoms = ['uguu'];
+
+    this.selectedAmount = { denom: 'uguu', amount: '0' };
+  }
+
+  ngOnChanges(): void {
+    if (this.minimumGasPrices && this.minimumGasPrices.length > 0) {
+      this.selectedGasPrice = this.minimumGasPrices[0];
+    }
+  }
+
+  ngOnInit(): void {}
+
+  getColorCode(address: string) {
+    const hash = crypto
+      .createHash('sha256')
+      .update(Buffer.from(address ?? ''))
+      .digest()
+      .toString('hex');
+    return `#${hash.substr(0, 6)}`;
+  }
+
+  unpackContent(value: any) {
+    try {
+      return cosmosclient.codec.unpackCosmosAny(value) as ProposalContent;
+    } catch {
+      return null;
+    }
+  }
+
+  onSubmit() {
+    if (!this.selectedAmount) {
+      return;
+    }
+    if (this.selectedGasPrice === undefined) {
+      return;
+    }
+    this.selectedAmount.amount = this.selectedAmount.amount?.toString();
+    this.appSubmit.emit({ amount: this.selectedAmount, minimumGasPrice: this.selectedGasPrice });
+  }
+
+  onMinimumGasDenomChanged(denom: string): void {
+    this.selectedGasPrice = this.minimumGasPrices?.find(
+      (minimumGasPrice) => minimumGasPrice.denom === denom,
+    );
+  }
+
+  onMinimumGasAmountSliderChanged(amount: string): void {
+    if (this.selectedGasPrice) {
+      this.selectedGasPrice.amount = amount;
+    }
+  }
+}
diff --git a/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.module.ts b/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.module.ts
new file mode 100644
index 000000000..7db9fde16
--- /dev/null
+++ b/projects/portal/src/app/views/dialogs/vote/deposit/deposit-form-dialog.module.ts
@@ -0,0 +1,12 @@
+import { MaterialModule } from '../../../material.module';
+import { DepositFormDialogComponent } from './deposit-form-dialog.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [DepositFormDialogComponent],
+  imports: [CommonModule, FormsModule, MaterialModule],
+  exports: [DepositFormDialogComponent],
+})
+export class DepositFormDialogModule {}
diff --git a/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.css b/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.html b/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.html
new file mode 100644
index 000000000..ede9e213c
--- /dev/null
+++ b/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.html
@@ -0,0 +1,86 @@
+<div class="flex flex-col items-center">
+  <img class="m-6 w-12 h-12" src="assets/favicon.png" alt="UnUniFi logo" />
+  <div class="font-bold text-xl m-3">Vote to this proposal</div>
+</div>
+<ng-container *ngIf="unpackContent(proposal?.content) as content">
+  <mat-list>
+    <mat-list-item>
+      <div mat-line>
+        <span># {{ proposal?.proposal_id }} {{ content.title }}</span>
+      </div>
+    </mat-list-item>
+  </mat-list>
+</ng-container>
+
+<mat-list>
+  <mat-label>Voter</mat-label>
+  <mat-list-item>
+    <mat-icon matListIcon [ngStyle]="{ color: getColorCode(currentStoredWallet?.address!) }"
+      >circle</mat-icon
+    >
+    <div mat-line>
+      <span>{{ currentStoredWallet?.address }}</span>
+    </div>
+  </mat-list-item>
+</mat-list>
+
+<h3 class="pt-3">Gas Settings</h3>
+<div class="flex flex-row content-content items-end">
+  <mat-form-field class="flex-auto">
+    <mat-label>Minimum Gas Denom</mat-label>
+    <mat-select
+      [(ngModel)]="selectedGasPrice && selectedGasPrice.denom"
+      name="minimum-gas-denom"
+      required
+      (valueChange)="onMinimumGasDenomChanged($event)"
+    >
+      <mat-option
+        *ngFor="let minimumGasPriceOption of minimumGasPrices"
+        [value]="minimumGasPriceOption.denom"
+      >
+        {{ minimumGasPriceOption.denom }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field class="flex-auto">
+    <mat-label>Minimum Gas Price</mat-label>
+    <input
+      [(ngModel)]="selectedGasPrice && selectedGasPrice.amount"
+      #minimumGasPriceRef
+      name="minimum-gas-price"
+      matInput
+      type="number"
+      [min]="0"
+      required
+    />
+  </mat-form-field>
+</div>
+<mat-slider
+  class="w-full"
+  [max]="1"
+  [min]="0"
+  [step]="0.015"
+  [(ngModel)]="selectedGasPrice && selectedGasPrice.amount"
+  name="minimum-gas-price-slider"
+>
+</mat-slider>
+
+<button class="w-full mb-4" mat-flat-button color="primary" (click)="onSubmitYes()">
+  <mat-icon class="mr-2">thumb_up</mat-icon>
+  <span>Yes</span>
+</button>
+
+<button class="w-full mb-4" mat-flat-button color="warn" (click)="onSubmitNoWithVeto()">
+  <mat-icon class="mr-2">thumb_down</mat-icon>
+  <span>No with Veto</span>
+</button>
+
+<button class="w-full mb-4" mat-flat-button color="accent" (click)="onSubmitNo()">
+  <mat-icon class="mr-2">thumb_down</mat-icon>
+  <span>No</span>
+</button>
+
+<button class="w-full mb-4" mat-flat-button (click)="onSubmitAbstain()">
+  <mat-icon class="mr-2">subtitles_off</mat-icon>
+  <span>Abstain</span>
+</button>
diff --git a/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.ts b/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.ts
new file mode 100644
index 000000000..a9d289dec
--- /dev/null
+++ b/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.component.ts
@@ -0,0 +1,112 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { cosmosclient, proto } from '@cosmos-client/core';
+import { InlineResponse20052Proposals } from '@cosmos-client/core/esm/openapi';
+import * as crypto from 'crypto';
+import { StoredWallet } from 'projects/portal/src/app/models/wallets/wallet.model';
+import { ProposalContent } from '../../../vote/proposals/proposals.component';
+
+@Component({
+  selector: 'view-vote-form-dialog',
+  templateUrl: './vote-form-dialog.component.html',
+  styleUrls: ['./vote-form-dialog.component.css'],
+})
+export class VoteFormDialogComponent implements OnInit {
+  @Input()
+  proposal?: InlineResponse20052Proposals | null;
+  @Input()
+  currentStoredWallet?: StoredWallet | null;
+  @Input()
+  coins?: proto.cosmos.base.v1beta1.ICoin[] | null;
+  @Input()
+  uguuBalance?: string | null;
+  @Input()
+  minimumGasPrices?: proto.cosmos.base.v1beta1.ICoin[] | null;
+  @Input()
+  proposalID?: number | null;
+
+  @Output()
+  appSubmitYes: EventEmitter<proto.cosmos.base.v1beta1.ICoin>;
+  @Output()
+  appSubmitNoWithVeto: EventEmitter<proto.cosmos.base.v1beta1.ICoin>;
+  @Output()
+  appSubmitNo: EventEmitter<proto.cosmos.base.v1beta1.ICoin>;
+  @Output()
+  appSubmitAbstain: EventEmitter<proto.cosmos.base.v1beta1.ICoin>;
+
+  selectedGasPrice?: proto.cosmos.base.v1beta1.ICoin;
+  availableDenoms?: string[];
+  selectedAmount?: proto.cosmos.base.v1beta1.ICoin;
+
+  constructor() {
+    this.appSubmitYes = new EventEmitter();
+    this.appSubmitNoWithVeto = new EventEmitter();
+    this.appSubmitNo = new EventEmitter();
+    this.appSubmitAbstain = new EventEmitter();
+    // this.availableDenoms = this.coins?.map((coin) => coin.denom!);
+    this.availableDenoms = ['uguu'];
+
+    this.selectedAmount = { denom: 'uguu', amount: '0' };
+  }
+
+  ngOnChanges(): void {
+    if (this.minimumGasPrices && this.minimumGasPrices.length > 0) {
+      this.selectedGasPrice = this.minimumGasPrices[0];
+    }
+  }
+
+  ngOnInit(): void {}
+
+  getColorCode(address: string) {
+    const hash = crypto
+      .createHash('sha256')
+      .update(Buffer.from(address ?? ''))
+      .digest()
+      .toString('hex');
+    return `#${hash.substr(0, 6)}`;
+  }
+
+  unpackContent(value: any) {
+    try {
+      return cosmosclient.codec.unpackCosmosAny(value) as ProposalContent;
+    } catch {
+      return null;
+    }
+  }
+
+  onSubmitYes() {
+    if (this.selectedGasPrice === undefined) {
+      return;
+    }
+    this.appSubmitYes.emit(this.selectedGasPrice);
+  }
+  onSubmitNoWithVeto() {
+    if (this.selectedGasPrice === undefined) {
+      return;
+    }
+    this.appSubmitYes.emit(this.selectedGasPrice);
+  }
+  onSubmitNo() {
+    if (this.selectedGasPrice === undefined) {
+      return;
+    }
+    this.appSubmitYes.emit(this.selectedGasPrice);
+  }
+  onSubmitAbstain() {
+    if (this.selectedGasPrice === undefined) {
+      return;
+    }
+    this.appSubmitYes.emit(this.selectedGasPrice);
+  }
+
+  onMinimumGasDenomChanged(denom: string): void {
+    this.selectedGasPrice = this.minimumGasPrices?.find(
+      (minimumGasPrice) => minimumGasPrice.denom === denom,
+    );
+  }
+
+  onMinimumGasAmountSliderChanged(amount: string): void {
+    if (this.selectedGasPrice) {
+      this.selectedGasPrice.amount = amount;
+    }
+  }
+}
diff --git a/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.module.ts b/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.module.ts
new file mode 100644
index 000000000..2ee74064d
--- /dev/null
+++ b/projects/portal/src/app/views/dialogs/vote/vote/vote-form-dialog.module.ts
@@ -0,0 +1,12 @@
+import { MaterialModule } from '../../../material.module';
+import { VoteFormDialogComponent } from './vote-form-dialog.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [VoteFormDialogComponent],
+  imports: [CommonModule, FormsModule, MaterialModule],
+  exports: [VoteFormDialogComponent],
+})
+export class VoteFormDialogModule {}
diff --git a/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.html b/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.html
index ef02161af..e95ad62aa 100644
--- a/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.html
+++ b/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.html
@@ -3,23 +3,70 @@
   <mat-progress-spinner [diameter]="60" [mode]="'indeterminate'"></mat-progress-spinner>
 </ng-template>
 <ng-template #loaded>
-  <h2>proposal: {{ proposal?.proposal_id }}</h2>
+  <ng-container *ngIf="unpackContent(proposal?.content) as content">
+    <div class="flex flex-row">
+      <h2># {{ proposal?.proposal_id }} {{ content.title }}</h2>
+      <span class="flex-auto"></span>
+      <mat-chip-list>
+        <mat-chip color="primary" selected>{{
+          proposal?.status?.replace('PROPOSAL_STATUS_', '')
+        }}</mat-chip>
+      </mat-chip-list>
+    </div>
 
-  <mat-card>
-    <mat-card-content>
-      <mat-list>
-        <mat-list-item>
-          <span>Status: </span>
-          <span class="flex-auto"></span>
-          <span>{{ proposal?.status }}</span>
-        </mat-list-item>
-      </mat-list>
-    </mat-card-content>
-  </mat-card>
+    <h3>Details</h3>
+    <mat-card class="mb-4">
+      <mat-card-content>
+        <mat-list>
+          <mat-list-item>
+            <span>Type </span>
+            <span class="flex-auto"></span>
+            <span>{{
+              proposalType?.substring(proposalType?.lastIndexOf('.')! + 1, proposalType?.length)
+            }}</span>
+          </mat-list-item>
+          <mat-divider [inset]="true"></mat-divider>
+          <mat-list-item>
+            <span>Submitted: </span>
+            <span class="flex-auto"></span>
+            <span>{{ proposal?.submit_time }}</span>
+          </mat-list-item>
+          <mat-divider [inset]="true"></mat-divider>
+          <mat-list-item>
+            <span>Start Voting: </span>
+            <span class="flex-auto"></span>
+            <span>{{ proposal?.voting_start_time }}</span>
+          </mat-list-item>
+          <mat-divider [inset]="true"></mat-divider>
+          <mat-list-item>
+            <span>End Voting: </span>
+            <span class="flex-auto"></span>
+            <span>{{ proposal?.voting_end_time }}</span>
+          </mat-list-item>
+          <mat-divider [inset]="true"></mat-divider>
+          <mat-list-item>
+            <span>Deposit End Time: </span>
+            <span class="flex-auto"></span>
+            <span>{{ proposal?.deposit_end_time }}</span>
+          </mat-list-item>
+        </mat-list>
+      </mat-card-content>
+    </mat-card>
 
-  <h3>Tally</h3>
+    <h3>Description</h3>
+    <mat-card class="mb-4">
+      <mat-card-content>
+        <mat-list>
+          <mat-list-item>
+            <span class="break-all">{{ content.description }}</span>
+          </mat-list-item>
+        </mat-list>
+      </mat-card-content>
+    </mat-card>
+  </ng-container>
 
-  <mat-card>
+  <h3>Votes</h3>
+  <mat-card class="mb-4">
     <mat-card-content>
       <mat-list>
         <mat-list-item>
@@ -29,10 +76,11 @@ <h3>Tally</h3>
         </mat-list-item>
         <mat-divider [inset]="true"></mat-divider>
         <mat-list-item>
-          <span>Abstain: </span>
+          <span>No with Veto: </span>
           <span class="flex-auto"></span>
-          <span>{{ tally?.abstain }}</span>
+          <span>{{ tally?.no_with_veto }}</span>
         </mat-list-item>
+
         <mat-divider [inset]="true"></mat-divider>
         <mat-list-item>
           <span>No: </span>
@@ -41,91 +89,127 @@ <h3>Tally</h3>
         </mat-list-item>
         <mat-divider [inset]="true"></mat-divider>
         <mat-list-item>
-          <span>No with Veto: </span>
+          <span>Abstain: </span>
           <span class="flex-auto"></span>
-          <span>{{ tally?.no_with_veto }}</span>
+          <span>{{ tally?.abstain }}</span>
         </mat-list-item>
       </mat-list>
     </mat-card-content>
   </mat-card>
 
-  <h3>Deposit</h3>
-  <mat-card>
+  <mat-card class="mb-4">
     <mat-card-content>
       <mat-list>
         <mat-list-item>
-          <span>Submit Time: </span>
+          <span>Voting Period: </span>
           <span class="flex-auto"></span>
-          <span>{{ proposal?.submit_time }}</span>
+          <span>{{ votingParams?.voting_period }}</span>
         </mat-list-item>
         <mat-divider [inset]="true"></mat-divider>
+
         <mat-list-item>
-          <span>Deposit End Time: </span>
+          <span>Quorum: </span>
           <span class="flex-auto"></span>
-          <span>{{ proposal?.deposit_end_time }}</span>
+          <span>{{ tallyParams?.quorum?.substring(0, 5) }}</span>
         </mat-list-item>
-      </mat-list>
-    </mat-card-content>
-  </mat-card>
+        <mat-divider [inset]="true"></mat-divider>
 
-  <h4>Total Deposit</h4>
-  <mat-card>
-    <mat-card-content>
-      <mat-list>
-        <mat-list-item *ngFor="let total of proposal?.total_deposit">
-          <span>{{ total.amount }}</span>
+        <mat-list-item>
+          <span>Threshold: </span>
           <span class="flex-auto"></span>
-          <span>{{ total.denom }}</span>
+          <span>{{ tallyParams?.threshold?.substring(0, 5) }}</span>
         </mat-list-item>
         <mat-divider [inset]="true"></mat-divider>
-      </mat-list>
-    </mat-card-content>
-  </mat-card>
 
-  <ng-container *ngFor="let deposit of deposits">
-    <h4>Depositor: {{ deposit.depositor }}</h4>
-    <mat-card>
-      <mat-list>
-        <mat-list-item *ngFor="let amount of deposit.amount">
-          <span>{{ amount.amount }}</span>
+        <mat-list-item>
+          <span>Veto Threshold: </span>
           <span class="flex-auto"></span>
-          <span>{{ amount.denom }}</span>
+          <span>{{ tallyParams?.veto_threshold?.substring(0, 5) }}</span>
         </mat-list-item>
-        <mat-divider [inset]="true"></mat-divider>
       </mat-list>
-    </mat-card>
-  </ng-container>
+    </mat-card-content>
+  </mat-card>
 
-  <h3>Vote</h3>
-  <mat-card>
+  <button
+    class="w-full mb-4"
+    mat-flat-button
+    color="primary"
+    (click)="onClickVote(proposal?.proposal_id!)"
+  >
+    <mat-icon>how_to_vote</mat-icon>
+    <span>Vote</span>
+  </button>
+
+  <h3>deposits</h3>
+  <mat-card class="mb-4">
     <mat-card-content>
       <mat-list>
-        <mat-list-item>
-          <span>Vote Start Time: </span>
-          <span class="flex-auto"></span>
-          <span>{{ proposal?.voting_start_time }}</span>
-        </mat-list-item>
+        <ng-container *ngIf="!proposal?.total_deposit?.length">
+          <mat-list-item>
+            <span>No Deposit</span>
+          </mat-list-item>
+        </ng-container>
+        <ng-container *ngFor="let total of proposal?.total_deposit">
+          <mat-list-item>
+            <span>Total Deposit:</span>
+            <span class="flex-auto"></span>
+            <span>{{ total.amount }} {{ total.denom }}</span>
+          </mat-list-item>
+        </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+        <ng-container *ngFor="let min of depositParams?.min_deposit">
+          <mat-list-item>
+            <span>Minimum Deposit:</span>
+            <span class="flex-auto"></span>
+            <span>{{ min.amount }} {{ min.denom }}</span>
+          </mat-list-item>
+        </ng-container>
         <mat-divider [inset]="true"></mat-divider>
         <mat-list-item>
-          <span>Vote End Time: </span>
+          <span>Max Deposit Period:</span>
           <span class="flex-auto"></span>
-          <span>{{ proposal?.voting_end_time }}</span>
+          <span>{{ depositParams?.max_deposit_period }}</span>
         </mat-list-item>
       </mat-list>
     </mat-card-content>
   </mat-card>
 
-  <ng-container *ngFor="let vote of votes">
-    <h4>voter: {{ vote.voter }}</h4>
-    <mat-card>
-      <mat-list>
+  <mat-card class="mb-4">
+    <mat-list>
+      <ng-container *ngFor="let deposit of deposits">
+        <ng-container *ngFor="let amount of deposit.amount">
+          <mat-list-item>
+            <span>{{ deposit.depositor }}:</span>
+            <span class="flex-auto"></span>
+            <span>{{ amount.amount }} {{ amount.denom }}</span>
+          </mat-list-item>
+        </ng-container>
+        <mat-divider [inset]="true"></mat-divider>
+      </ng-container>
+    </mat-list>
+  </mat-card>
+
+  <button
+    class="w-full mb-4"
+    mat-flat-button
+    color="primary"
+    (click)="onClickDeposit(proposal?.proposal_id!)"
+  >
+    <mat-icon>add</mat-icon>
+    <span>Deposit</span>
+  </button>
+
+  <h3>Vote</h3>
+  <mat-card>
+    <mat-list>
+      <ng-container *ngFor="let vote of votes">
         <mat-list-item>
-          <span>Yes: </span>
+          <span class="break-all">{{ vote.voter }}: </span>
           <span class="flex-auto"></span>
-          <span>{{ vote.option }}</span>
+          <span>{{ vote.option?.replace('VOTE_OPTION_', '') }}</span>
         </mat-list-item>
         <mat-divider [inset]="true"></mat-divider>
-      </mat-list>
-    </mat-card>
-  </ng-container>
+      </ng-container>
+    </mat-list>
+  </mat-card>
 </ng-template>
diff --git a/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.ts b/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.ts
index 464851b9a..b3881db49 100644
--- a/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.ts
+++ b/projects/portal/src/app/views/vote/proposals/proposal/proposal.component.ts
@@ -1,9 +1,14 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ProposalContent } from '../proposals.component';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { cosmosclient } from '@cosmos-client/core';
 import {
   InlineResponse20052Proposals,
   InlineResponse20054Deposits,
   InlineResponse20052FinalTallyResult,
   InlineResponse20057Votes,
+  InlineResponse20051DepositParams,
+  InlineResponse20051TallyParams,
+  InlineResponse20051VotingParams,
 } from '@cosmos-client/core/esm/openapi';
 
 @Component({
@@ -15,13 +20,45 @@ export class ProposalComponent implements OnInit {
   @Input()
   proposal?: InlineResponse20052Proposals | null;
   @Input()
+  proposalType?: string | null;
+  @Input()
   deposits?: InlineResponse20054Deposits[] | null;
   @Input()
+  depositParams?: InlineResponse20051DepositParams | null;
+  @Input()
   tally?: InlineResponse20052FinalTallyResult | null;
   @Input()
+  tallyParams?: InlineResponse20051TallyParams | null;
+  @Input()
   votes?: InlineResponse20057Votes[] | null;
+  @Input()
+  votingParams?: InlineResponse20051VotingParams | null;
 
-  constructor() {}
+  @Output()
+  appClickVote: EventEmitter<number>;
+  @Output()
+  appClickDeposit: EventEmitter<number>;
+
+  constructor() {
+    this.appClickVote = new EventEmitter();
+    this.appClickDeposit = new EventEmitter();
+  }
 
   ngOnInit(): void {}
+
+  unpackContent(value: any) {
+    try {
+      return cosmosclient.codec.unpackCosmosAny(value) as ProposalContent;
+    } catch {
+      return null;
+    }
+  }
+
+  onClickVote(proposalID: string) {
+    this.appClickVote.emit(Number(proposalID));
+  }
+
+  onClickDeposit(proposalID: string) {
+    this.appClickDeposit.emit(Number(proposalID));
+  }
 }
diff --git a/projects/portal/src/app/views/vote/proposals/proposal/proposal.module.ts b/projects/portal/src/app/views/vote/proposals/proposal/proposal.module.ts
index 424ed1f91..ca65ed139 100644
--- a/projects/portal/src/app/views/vote/proposals/proposal/proposal.module.ts
+++ b/projects/portal/src/app/views/vote/proposals/proposal/proposal.module.ts
@@ -2,11 +2,12 @@ import { MaterialModule } from '../../../material.module';
 import { ProposalComponent } from './proposal.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatChipsModule } from '@angular/material/chips';
 import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [ProposalComponent],
-  imports: [CommonModule, RouterModule, MaterialModule],
+  imports: [CommonModule, RouterModule, MaterialModule, MatChipsModule],
   exports: [ProposalComponent],
 })
 export class ProposalModule {}
diff --git a/projects/portal/src/app/views/vote/proposals/proposals.component.html b/projects/portal/src/app/views/vote/proposals/proposals.component.html
index 8aba249fb..661006d6e 100644
--- a/projects/portal/src/app/views/vote/proposals/proposals.component.html
+++ b/projects/portal/src/app/views/vote/proposals/proposals.component.html
@@ -14,12 +14,29 @@ <h2 class="mb-0">Proposals</h2>
   <mat-card>
     <mat-nav-list>
       <ng-container *ngFor="let proposal of proposals?.proposals">
-        <mat-list-item routerLink="{{ proposal.proposal_id }}">
-          <span>{{ proposal.proposal_id }}</span>
-          <span class="flex-auto"></span>
-          <span>{{ proposal.status }}</span>
-        </mat-list-item>
-        <mat-divider></mat-divider>
+        <ng-container *ngIf="unpackContent(proposal.content) as content">
+          <mat-list-item routerLink="{{ proposal.proposal_id }}">
+            <span># {{ proposal.proposal_id }}</span>
+            <span class="flex-auto"></span>
+            <span>{{ content.title }}</span>
+            <span class="flex-auto"></span>
+            <span>{{ proposal.status?.replace('PROPOSAL_STATUS_', '') }}</span>
+          </mat-list-item>
+          <mat-list-item (click)="onClickVote(proposal.proposal_id!)">
+            <mat-icon class="mr-2" color="primary">thumb_up</mat-icon>
+            <span>{{ proposal.final_tally_result?.yes }}</span>
+            <span class="flex-auto"></span>
+            <mat-icon class="mr-2" color="warn">thumb_down</mat-icon>
+            <span>{{ proposal.final_tally_result?.no_with_veto }}</span>
+            <span class="flex-auto"></span>
+            <mat-icon class="mr-2" color="accent">thumb_down</mat-icon>
+            <span>{{ proposal.final_tally_result?.no }}</span>
+            <span class="flex-auto"></span>
+            <mat-icon class="mr-2">subtitles_off</mat-icon>
+            <span>{{ proposal.final_tally_result?.abstain }}</span>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+        </ng-container>
       </ng-container>
     </mat-nav-list>
   </mat-card>
diff --git a/projects/portal/src/app/views/vote/proposals/proposals.component.ts b/projects/portal/src/app/views/vote/proposals/proposals.component.ts
index 1786f7732..b3fdc17c8 100644
--- a/projects/portal/src/app/views/vote/proposals/proposals.component.ts
+++ b/projects/portal/src/app/views/vote/proposals/proposals.component.ts
@@ -1,6 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { cosmosclient } from '@cosmos-client/core';
 import { InlineResponse20052 } from '@cosmos-client/core/esm/openapi';
 
+export interface ProposalContent {
+  type: string;
+  title: string;
+  description: string;
+}
+
 @Component({
   selector: 'view-proposals',
   templateUrl: './proposals.component.html',
@@ -10,7 +17,24 @@ export class ProposalsComponent implements OnInit {
   @Input()
   proposals?: InlineResponse20052 | null;
 
-  constructor() {}
+  @Output()
+  appClickVote: EventEmitter<number>;
+
+  constructor() {
+    this.appClickVote = new EventEmitter();
+  }
 
   ngOnInit(): void {}
+
+  unpackContent(value: any) {
+    try {
+      return cosmosclient.codec.unpackCosmosAny(value) as ProposalContent;
+    } catch {
+      return null;
+    }
+  }
+
+  onClickVote(proposalID: string) {
+    this.appClickVote.emit(Number(proposalID));
+  }
 }