diff --git a/.eslintrc.json b/.eslintrc.json
index 97d6b58b..fde573b7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,10 +1,61 @@
 {
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "extends": [
     "next/core-web-vitals",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
     "prettier/prettier": ["error",{
-      "endOfLine": "auto"}]
-    }
+      "endOfLine": "auto"}],
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-tslint-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/class-literal-property-style": "off",
+    "@typescript-eslint/consistent-generic-constructors": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-shadow": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/prefer-function-type": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/triple-slash-reference": "off",
+    "no-var": "off",
+    "prefer-const": "off",
+    "prefer-rest-params": "off",
+    "prefer-spread": "off",
+    "no-unused-expressions": "off",
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+        "allowTaggedTemplates": true
+      }
+    ],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "args": "none",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "no-use-before-define": "off",
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-useless-constructor": "warn",
+    "@typescript-eslint/prefer-literal-enum-member": "error"
+  }
 }
\ No newline at end of file
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
index 408245ae..78722dfd 100644
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -11,14 +11,18 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: 20.11.0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+            version: 8
 
       - uses: actions/cache@v2
         with:
           path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/pnpm-yarn.lock') }}
 
       - name: Install modules
-        run: npm install
+        run: pnpm install
 
       - name: Lint
-        run: npm run lint
+        run: pnpm run lint
diff --git a/README.md b/README.md
index aaced97c..59eca309 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,18 @@
 # Mento Governance UI
- 
+
 ## Description
- 
+
 This is the UI repo for Mento Governance.
- 
+
 ## Table of Contents
- 
+
 - [Prerequisites](#prerequisites)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Project Spec](#project-spec)
 <!-- - [Credits](#credits)
 - [License](#license) -->
- 
+
 ## Prerequisites
 
 - [node.js](https://nodejs.org/en) >= 20.11.0
@@ -24,43 +24,43 @@ This is the UI repo for Mento Governance.
 ```bash
 pnpm install && cp .env .env.local
 ```
- 
+
 ## Usage
- 
+
 ```bash
 pnpm dev
 ```
 
 ## Project spec
 
-Please refer to our [spec documents by clicking here.](./docs/introduction.md)
- 
+Please refer to our [spec documents by clicking here.](./docs/index.md)
+
 <!-- ## Credits
- 
+
 List your collaborators, if any, with links to their GitHub profiles.
- 
+
 If you used any third-party assets that require attribution, list the creators with links to their primary web presence in this section.
- 
+
 If you followed tutorials, include links to those here as well.
- 
+
 ## License
- 
+
 The last section of a high-quality README file is the license. This lets other developers know what they can and cannot do with your project. If you need help choosing a license, refer to [https://choosealicense.com/](https://choosealicense.com/). -->
- 
+
 <!-- ## Badges
- 
+
 ![badmath](https://img.shields.io/github/languages/top/lernantino/badmath)
- 
+
 Badges aren't necessary, per se, but they demonstrate street cred. Badges let other developers know that you know what you're doing. Check out the badges hosted by [shields.io](https://shields.io/). You may not understand what they all represent now, but you will in time.
- 
+
 ## Features
- 
+
 If your project has a lot of features, list them here. -->
- 
+
 <!-- ## How to Contribute
- 
+
 If you created an application or package and would like other developers to contribute it, you can include guidelines for how to do so. The [Contributor Covenant](https://www.contributor-covenant.org/) is an industry standard, but you can always write your own if you'd prefer. -->
- 
+
 <!-- ## Tests
- 
-Go the extra mile and write tests for your application. Then provide examples on how to run them here. -->
\ No newline at end of file
+
+Go the extra mile and write tests for your application. Then provide examples on how to run them here. -->
diff --git a/app/(routes)/create-proposal/page.tsx b/app/(routes)/create-proposal/page.tsx
deleted file mode 100644
index 4758cc13..00000000
--- a/app/(routes)/create-proposal/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-import styles from "./page.module.scss";
-import {
-  CreateProposalExecutionStep,
-  CreateProposalContentStep,
-  CreateProposalWalletStep,
-  CreateProposalPreviewStep,
-} from "@components/create-proposal";
-import { useEffect } from "react";
-import { useCreateProposalStore } from "@/app/store";
-
-const Page = () => {
-  const { reset } = useCreateProposalStore();
-
-  useEffect(() => {
-    reset();
-  }, [reset]);
-
-  return (
-    <main className="flex flex-col place-items-center">
-      <h2 className="text-2xl font-bold mb-5">Create a Proposal</h2>
-      <div className={styles.form_wrapper}>
-        <CreateProposalWalletStep />
-        <CreateProposalContentStep />
-        <CreateProposalExecutionStep />
-        <CreateProposalPreviewStep />
-      </div>
-    </main>
-  );
-};
-
-export default Page;
diff --git a/app/components/create-proposal/create-proposal-execution-step/create-proposal-execution-step.component.tsx b/app/components/create-proposal/create-proposal-execution-step/create-proposal-execution-step.component.tsx
deleted file mode 100644
index d3793405..00000000
--- a/app/components/create-proposal/create-proposal-execution-step/create-proposal-execution-step.component.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-import Wrapper from "@components/create-proposal/wrapper/wrapper.component";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { CreateProposalFormStepEnum } from "@interfaces/create-proposal.interface";
-import { useForm } from "react-hook-form";
-import { InferType, object, setLocale, string } from "yup";
-import { Textarea } from "@components/_shared";
-import { useCreateProposalStore } from "@/app/store";
-import { useEffect } from "react";
-
-const validationSchema = object({
-  code: string().required().typeError("Invalid code"),
-});
-
-type FormData = InferType<typeof validationSchema>;
-
-const formStep = CreateProposalFormStepEnum.execution;
-
-export const CreateProposalExecutionStep = () => {
-  const { patchExecutionStep } = useCreateProposalStore();
-
-  const {
-    register,
-    watch,
-    setValue,
-    getValues,
-    handleSubmit,
-    formState: { errors, isValid },
-  } = useForm<FormData>({
-    resolver: yupResolver(validationSchema),
-    mode: "onChange",
-  });
-
-  setLocale({
-    mixed: {
-      default: "Value is required",
-    },
-  });
-
-  useEffect(() => {
-    const subscription = watch((value) => {
-      patchExecutionStep({
-        code: value.code || "",
-      });
-    });
-    return () => subscription.unsubscribe();
-  }, [watch, patchExecutionStep]);
-
-  return (
-    <Wrapper step={formStep} title="Execution Code">
-      <div>
-        <p className="font-size-x4 line-height-x5 ml-x7">
-          Paste your governance proposal’s execution code in the json format in
-          the field below:
-        </p>
-        <Textarea
-          className="mt-x5 mb-x5 min-h-[266px]"
-          form={{ ...register("code") }}
-          id="code"
-          error={errors.code?.message}
-          placeholder="Paste your code here"
-        />
-      </div>
-    </Wrapper>
-  );
-};
diff --git a/app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx b/app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx
deleted file mode 100644
index 0afcecac..00000000
--- a/app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-"use client";
-import { GovernorABI } from "@/app/abis/Governor";
-import { useContracts } from "@/app/hooks/useContracts";
-import { useCreateProposalStore } from "@/app/store";
-import { ExecutionCodeView, MarkdownView, SeeAll } from "@components/_shared";
-import Wrapper from "@components/create-proposal/wrapper/wrapper.component";
-import { CreateProposalFormStepEnum } from "@interfaces/create-proposal.interface";
-import { useCallback, useMemo, useState } from "react";
-import { Address } from "viem";
-import styles from "./create-proposal-preview-step.module.scss";
-import { useWriteContract } from "wagmi";
-
-const formStep = CreateProposalFormStepEnum.preview;
-
-type ProposalCreateParams = {
-  metadata: { title: string; description: string };
-  transactions: Array<{
-    address: string;
-    value: string | number;
-    data: string;
-  }>;
-};
-
-export const CreateProposalPreviewStep = () => {
-  const [isProposalPreviewOpen, setIsProposalPreviewOpen] = useState(false);
-  const { form } = useCreateProposalStore();
-  const contracts = useContracts();
-
-  const proposal: ProposalCreateParams = useMemo(() => {
-    const { title, description } =
-      form[CreateProposalFormStepEnum.content].value;
-    let transactions = [];
-    try {
-      transactions = JSON.parse(
-        form[CreateProposalFormStepEnum.execution].value.code.value,
-      );
-    } catch (e) {}
-
-    if (transactions.length === 0) {
-      transactions = [
-        {
-          address: "0x0000000000000000000000000000000000000000",
-          value: 0,
-          data: "0x",
-        },
-      ];
-    }
-
-    return {
-      metadata: {
-        title: title.value,
-        description: description.value,
-      },
-      transactions,
-    };
-  }, [form]);
-
-  const { data, error, writeContract } = useWriteContract();
-
-  const onSave = useCallback(() => {
-    writeContract({
-      address: contracts?.MentoGovernor.address as Address,
-      abi: GovernorABI,
-      functionName: "propose",
-      args: [
-        proposal.transactions.map(
-          (transaction) => transaction.address as Address,
-        ),
-        proposal.transactions.map((transaction) => BigInt(transaction.value)),
-        proposal.transactions.map((transaction) => transaction.data),
-        JSON.stringify(proposal.metadata),
-      ] as any,
-    });
-  }, [writeContract, proposal, contracts?.MentoGovernor.address]);
-
-  return (
-    <Wrapper
-      step={formStep}
-      title="Preview your proposal"
-      onSave={onSave}
-      className={styles.container}
-    >
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-      <pre>{error ? error.message : null}</pre>
-      <div className="ml-x7">
-        <p className="font-size-x4 line-height-x5">
-          You&apos;ve successfully finished all the steps. Now, take a moment to
-          go over your proposal and then submit it.
-        </p>
-        <div className={styles.title}>{proposal.metadata.title}</div>
-        <div>
-          <h3 className={styles.form_data_title}>Proposal Description</h3>
-          <SeeAll
-            height="315"
-            isOpen={isProposalPreviewOpen}
-            setIsOpen={setIsProposalPreviewOpen}
-          >
-            <MarkdownView markdown={proposal.metadata.description} />
-          </SeeAll>
-          <ExecutionCodeView code={proposal.transactions} />
-        </div>
-      </div>
-    </Wrapper>
-  );
-};
diff --git a/app/components/create-proposal/wrapper/wrapper.component.tsx b/app/components/create-proposal/wrapper/wrapper.component.tsx
deleted file mode 100644
index ee99012e..00000000
--- a/app/components/create-proposal/wrapper/wrapper.component.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import styles from "../create-proposal.module.scss";
-import { Button, Card, StepCounter } from "@components/_shared";
-import classNames from "classnames";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import {
-  CreateProposalFormStepEnum,
-  createProposalFormStepOrder,
-} from "@interfaces/create-proposal.interface";
-import { useMemo } from "react";
-import { useCreateProposalStore } from "@/app/store";
-
-interface WrapperProps extends BaseComponentProps {
-  step: CreateProposalFormStepEnum;
-  title: string;
-  onSave?: () => void;
-}
-
-const Wrapper = ({
-  children,
-  className,
-  step,
-  title,
-  style,
-  onSave,
-}: WrapperProps) => {
-  const { form } = useCreateProposalStore();
-
-  const stepIndex = useMemo(() => {
-    return createProposalFormStepOrder.indexOf(step) + 1;
-  }, [step]);
-
-  const isOpened = useMemo(() => {
-    return form[step].isOpened;
-  }, [form, step]);
-
-  const { next, prev, openedForm, canGoNext, canGoPrev } =
-    useCreateProposalStore();
-
-  return (
-    <Card
-      block
-      className={classNames(
-        className,
-        "pb-0",
-        styles.wrapper,
-        !isOpened && "opacity-50",
-      )}
-      style={style}
-    >
-      <Card.Header>
-        <div className={styles.title}>
-          <StepCounter>{stepIndex}</StepCounter>
-          {title}
-        </div>
-      </Card.Header>
-      <div
-        className={classNames(styles.form_element, isOpened && styles.opened)}
-      >
-        <div className={styles.inner}>{children}</div>
-        <Card.Footer>
-          <div className="flex full-w justify-start items-center gap-x3">
-            <Button
-              className="min-w-x20"
-              onClick={prev}
-              disabled={!canGoPrev}
-              theme="tertiary"
-            >
-              Back
-            </Button>
-            {canGoNext && (
-              <Button className="min-w-x20" onClick={next} theme="primary">
-                Next
-              </Button>
-            )}
-            {!canGoNext &&
-              openedForm === CreateProposalFormStepEnum.preview && (
-                <Button className="min-w-x20" onClick={onSave} theme="primary">
-                  Save
-                </Button>
-              )}
-          </div>
-        </Card.Footer>
-      </div>
-    </Card>
-  );
-};
-
-export default Wrapper;
diff --git a/app/components/proposals-list/proposals-list.component.tsx b/app/components/proposals-list/proposals-list.component.tsx
deleted file mode 100644
index 24ab79dc..00000000
--- a/app/components/proposals-list/proposals-list.component.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { GetProposals, Proposal } from "@/app/graphql";
-import NumbersService from "@/app/helpers/numbers.service";
-import StringService from "@/app/helpers/string.service";
-import { useProposalStates } from "@/app/hooks/useProposalStates";
-import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
-import { Card, ProgressBar, Status } from "@components/_shared";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import { stateToStatusColorMap } from "@interfaces/proposal.interface";
-import classNames from "classnames";
-import Link from "next/link";
-import { formatUnits, numberToHex } from "viem";
-import { useChainId } from "wagmi";
-import styles from "./proposals-list.module.scss";
-
-interface ProposalsListProps extends BaseComponentProps {}
-
-export const ProposalsListComponent = ({
-  className,
-  style,
-}: ProposalsListProps) => {
-  const chainId = useChainId();
-  const { data } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposals, {
-    queryKey: "GetProposals",
-    context: {
-      apiName: chainId === 44787 ? "subgraphAlfajores" : "subgraph",
-    },
-  });
-
-  useProposalStates(data?.proposals);
-
-  return (
-    <div
-      className={classNames(styles.wrapper, className, "font-fg")}
-      style={style}
-    >
-      <h2 className="text-center mt-x11 mb-x6 font-medium">Proposals</h2>
-      <Card block>
-        <div className={classNames(styles.proposals_grid, "text_small")}>
-          <div
-            className={classNames(
-              styles.proposals_grid__row,
-              styles.headers,
-              "font-inter",
-            )}
-          >
-            <div className={classNames(styles.header)}>Proposal name</div>
-            <div className={styles.header}>Status</div>
-            <div className={styles.header}>Votes in favor</div>
-            <div className={styles.header}>Votes against</div>
-            <div className={styles.header}>Total votes</div>
-          </div>
-          {data?.proposals.map(
-            ({ proposalId, metadata, state, votes }, index) => (
-              <div
-                key={index}
-                className={classNames(styles.proposals_grid__row)}
-              >
-                {!!index && <div className={styles.divider} />}
-                <div
-                  className={classNames(
-                    styles.proposals_grid__row__element,
-                    styles.first,
-                  )}
-                >
-                  <div className="flex gap-x3 place-items-center">
-                    <Link
-                      className="flex-1"
-                      style={{ maxHeight: "3em" }}
-                      href={`/proposals/${proposalId}`}
-                    >
-                      <p>
-                        {StringService.limitLength(
-                          `${metadata?.title}`,
-                          75,
-                          true,
-                        )}
-                      </p>
-                    </Link>
-                  </div>
-                </div>
-                <Status
-                  text={state?.toString()}
-                  type={stateToStatusColorMap[state]}
-                />
-                <div
-                  className={classNames(styles.proposals_grid__row__element)}
-                >
-                  <ProgressBar
-                    type="success"
-                    className={styles.progress_bar}
-                    current={Number(formatUnits(votes.for.total, 18))}
-                    max={Number(formatUnits(votes.total, 18))}
-                    valueFormat="alphabetic"
-                  />
-                </div>
-                <div
-                  className={classNames(styles.proposals_grid__row__element)}
-                >
-                  <ProgressBar
-                    type="danger"
-                    className={styles.progress_bar}
-                    current={Number(formatUnits(votes.against.total, 18))}
-                    max={Number(formatUnits(votes.total, 18))}
-                    valueFormat="alphabetic"
-                  />
-                </div>
-                <div
-                  className={classNames(
-                    styles.proposals_grid__row__element,
-                    styles.last,
-                    "mb-3",
-                  )}
-                >
-                  {NumbersService.parseNumericValue(
-                    formatUnits(votes.total, 18),
-                  )}
-                </div>
-              </div>
-            ),
-          )}
-        </div>
-      </Card>
-    </div>
-  );
-};
diff --git a/app/interfaces/create-proposal.interface.ts b/app/interfaces/create-proposal.interface.ts
deleted file mode 100644
index c16ec736..00000000
--- a/app/interfaces/create-proposal.interface.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { addWeeks } from "date-fns";
-
-export enum CreateProposalFormStepEnum {
-  wallet = "wallet",
-  content = "content",
-  execution = "execution",
-  preview = "preview",
-}
-
-export interface CreateProposalForm {
-  [CreateProposalFormStepEnum.wallet]: CreateProposalFormStep<WalletProposalForm>;
-  [CreateProposalFormStepEnum.content]: CreateProposalFormStep<WalletContentForm>;
-  [CreateProposalFormStepEnum.execution]: CreateProposalFormStep<WalletExecutionForm>;
-  [CreateProposalFormStepEnum.preview]: CreateProposalFormStep<WalletPreviewForm>;
-}
-
-export interface FormField<T> {
-  value: T;
-  validate: (value: any) => boolean;
-}
-
-export interface CreateProposalFormStep<T> {
-  isOpened: boolean;
-  value: T;
-  isValid: boolean;
-}
-
-export interface WalletProposalForm {
-  walletAddress: FormField<string>;
-  balanceVeMENTO: FormField<number>;
-  balanceMENTO: FormField<number>;
-}
-
-export interface WalletContentForm {
-  title: FormField<string>;
-  description: FormField<string>;
-}
-
-export interface WalletExecutionForm {
-  code: FormField<string>;
-}
-
-export interface WalletPreviewForm {}
-
-const isNullOrWhitespace = (input: string) => {
-  return !input || !input.trim();
-};
-
-export const initialCreateProposalForm: CreateProposalForm = {
-  [CreateProposalFormStepEnum.wallet]: {
-    value: {
-      walletAddress: {
-        value: "",
-        validate: (value: string) => !isNullOrWhitespace(value),
-      },
-      balanceMENTO: {
-        value: 0,
-        validate: (value: number) => value > 10,
-      },
-      balanceVeMENTO: {
-        value: 0,
-        validate: (value: number) => value > 2500,
-      },
-    },
-    isOpened: true,
-    isValid: false,
-  },
-  [CreateProposalFormStepEnum.content]: {
-    value: {
-      title: {
-        value: "",
-        validate: (value: string) => !isNullOrWhitespace(value),
-      },
-      description: {
-        value: "",
-        validate: (value: string) => !isNullOrWhitespace(value),
-      },
-    },
-    isOpened: false,
-    isValid: false,
-  },
-
-  [CreateProposalFormStepEnum.execution]: {
-    value: {
-      code: {
-        value: "",
-        validate: (value: string) => true,
-      },
-    },
-    isOpened: false,
-    isValid: false,
-  },
-
-  [CreateProposalFormStepEnum.preview]: {
-    value: {},
-    isOpened: false,
-    isValid: false,
-  },
-};
-
-export const createProposalFormStepOrder = [
-  CreateProposalFormStepEnum.wallet,
-  CreateProposalFormStepEnum.content,
-  CreateProposalFormStepEnum.execution,
-  CreateProposalFormStepEnum.preview,
-];
diff --git a/app/interfaces/form.interface.ts b/app/interfaces/form.interface.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/providers/chainState.provider.tsx b/app/providers/chainState.provider.tsx
deleted file mode 100644
index 5aa4be8e..00000000
--- a/app/providers/chainState.provider.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { createContext, useContext, useEffect, useRef } from "react";
-import { useAccount, useChainId, usePublicClient } from "wagmi";
-import { useStore } from "zustand";
-import { useContracts } from "../hooks/useContracts";
-import {
-  ChainState,
-  ChainStateStore,
-  createChainStateStore,
-} from "../store/chainState.store";
-
-type ChainStateProviderProps = React.PropsWithChildren<{}>;
-
-export const ChainStateContext = createContext<ChainStateStore | null>(null);
-export const ChainStateProvider = ({ children }: ChainStateProviderProps) => {
-  const storeRef = useRef<ChainStateStore>();
-  if (!storeRef.current) {
-    storeRef.current = createChainStateStore();
-  }
-  const chainId = useChainId();
-  const contracts = useContracts();
-  const account = useAccount();
-  const client = usePublicClient();
-
-  useEffect(() => {
-    const state = storeRef.current!.getState();
-
-    if (account.isDisconnected && state.initialized) {
-      state.clear();
-    }
-
-    if (!account.isConnected) {
-      return;
-    }
-
-    if (
-      !state.initialized ||
-      state.chainId !== chainId ||
-      state.wallet != account.address
-    ) {
-      state.init(chainId, contracts!, account.address!, client);
-    }
-  }, [chainId, contracts, account, client]);
-
-  return (
-    <ChainStateContext.Provider value={storeRef.current}>
-      {children}
-    </ChainStateContext.Provider>
-  );
-};
-
-export function useChainState<T>(selector: (state: ChainState) => T): T {
-  const store = useContext(ChainStateContext);
-  if (!store) throw new Error("Missing ChainStateProvider in the tree");
-  return useStore(store, selector);
-}
diff --git a/app/store/chainState.store.tsx b/app/store/chainState.store.tsx
deleted file mode 100644
index 9a907e28..00000000
--- a/app/store/chainState.store.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import type { Address, MulticallParameters, PublicClient } from "viem";
-import { erc20Abi } from "viem";
-import { createStore } from "zustand";
-import { immer } from "zustand/middleware/immer";
-import { MentoChain } from "../types";
-
-interface TokenWithBalance {
-  symbol: string;
-  decimals: number;
-  address: Address;
-  balance: bigint;
-}
-
-interface ChainStateData {
-  // Internals:
-  client: PublicClient | undefined;
-  refreshInterval: ReturnType<typeof setInterval> | null;
-  initialized: boolean;
-  ready: boolean;
-  chainId: number;
-  wallet: Address;
-  contracts: MentoChain["contracts"] | null;
-  // State:
-  tokens: {
-    mento: TokenWithBalance;
-    veMento: TokenWithBalance;
-  };
-}
-
-interface ChainStateActions {
-  init: (
-    chainId: MentoChain["id"],
-    contracts: MentoChain["contracts"],
-    wallet: Address,
-    client: PublicClient | undefined,
-  ) => void;
-  clear: () => void;
-  load: (viewCalls: ViewCall[]) => Promise<void>;
-}
-
-export type ChainState = ChainStateData & ChainStateActions;
-
-const emptyTokenBalance: TokenWithBalance = {
-  balance: BigInt(0),
-  symbol: "",
-  decimals: 0,
-  address: "0x",
-};
-
-const INITIAL_STATE: ChainStateData = {
-  initialized: false,
-  refreshInterval: null,
-  ready: false,
-  chainId: 0,
-  wallet: "0x0",
-  client: undefined,
-  contracts: null,
-  tokens: {
-    mento: emptyTokenBalance,
-    veMento: emptyTokenBalance,
-  },
-};
-
-/*
- * Interface of a ViewCall.
- * The store has multiple view calls that are loaded and refreshed
- * and exposed as state to the application.
- * Centralizing them here will result in a single RCP call to a mulicall
- * contract, instead of multiple calls to different contracts.
- */
-interface ViewCall {
-  call: MulticallParameters["contracts"][0];
-  update: (result: any) => (state: ChainState) => void;
-  refresh: boolean;
-}
-
-/*
- * Helper to return a balanceOf multicall getter
- */
-const balanceOf = (token: Address, wallet: Address) => ({
-  address: token,
-  abi: erc20Abi,
-  functionName: "balanceOf",
-  args: [wallet],
-});
-
-/*
- * This function is used to compile all view calls that will be
- * loaded and refreshed always in the app.
- * @dev: Add global view calls here, like the contract params.
- */
-const compileViewCalls = (state: ChainStateData): ViewCall[] => {
-  return [
-    {
-      // $MENTO.balanceOf(wallet) -> state.tokens.mento.balance
-      call: balanceOf(state.tokens.mento.address, state.wallet),
-      update: (result: bigint) => (state: ChainState) => {
-        state.tokens.mento.balance = result;
-      },
-      refresh: true,
-    },
-    {
-      // $veMENTO.balanceOf(wallet) -> state.tokens.veMento.balance
-      call: balanceOf(state.tokens.veMento.address, state.wallet),
-      update: (result: bigint) => (state: ChainState) => {
-        state.tokens.veMento.balance = result;
-      },
-      refresh: true,
-    },
-  ];
-};
-
-export type ChainStateStore = ReturnType<typeof createChainStateStore>;
-export const createChainStateStore = () => {
-  return createStore<ChainState>()(
-    immer((set, get) => ({
-      ...INITIAL_STATE,
-      init: (
-        chainId: MentoChain["id"],
-        contracts: MentoChain["contracts"],
-        wallet: Address,
-        client: PublicClient | undefined,
-      ) => {
-        if (get().initialized === true) {
-          get().clear();
-        }
-        set((state) => {
-          return {
-            ...state,
-            wallet,
-            client,
-            initialized: true,
-            ready: false,
-            chainId: chainId,
-            contracts: contracts,
-            tokens: {
-              mento: {
-                symbol: "MENTO",
-                decimals: 18,
-                address: contracts.MentoToken.address,
-                balance: BigInt(0),
-              },
-              veMento: {
-                symbol: "veMENTO",
-                decimals: 18,
-                address: contracts.Locking.address,
-                balance: BigInt(0),
-              },
-            },
-            viewCalls: [],
-          };
-        });
-
-        const viewCalls = compileViewCalls(get());
-
-        // Initial load
-        get()
-          .load(viewCalls)
-          .then(() => {
-            set((state) => {
-              state.ready = true;
-            });
-          });
-
-        // Refresh viewCalls that are marked with refresh
-        const refreshInterval = setInterval(() => {
-          get().load(viewCalls.filter((viewCall) => viewCall.refresh === true));
-        }, 40000); // TODO: Make refresh interval configurable
-
-        set((state) => {
-          state.refreshInterval = refreshInterval;
-        });
-      },
-      load: async (viewCalls: ViewCall[]) => {
-        const client = get().client;
-        if (client == null) return;
-        const results = await client.multicall({
-          contracts: viewCalls.map((viewCall) => viewCall.call),
-        });
-        results.forEach((result, index) => {
-          if (result.status == "success") {
-            set(viewCalls[index].update(result.result));
-          } else {
-            console.error(
-              `Error fetching ${viewCalls[index].call.address}.${viewCalls[index].call.functionName}`,
-            );
-          }
-        });
-      },
-      clear: () => {
-        const intervalId = get().refreshInterval;
-        if (intervalId !== null) {
-          clearInterval(intervalId);
-        }
-      },
-    })),
-  );
-};
diff --git a/app/store/create-proposal.store.ts b/app/store/create-proposal.store.ts
deleted file mode 100644
index d73438c2..00000000
--- a/app/store/create-proposal.store.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import {
-  CreateProposalForm,
-  CreateProposalFormStepEnum,
-  createProposalFormStepOrder,
-  initialCreateProposalForm,
-  WalletProposalForm,
-} from "@interfaces/create-proposal.interface";
-import { create } from "zustand";
-
-interface CreateProposalStore {
-  form: CreateProposalForm;
-  navigateInForm: (direction: "next" | "prev") => void;
-  canGoNext: boolean;
-  canGoPrev: boolean;
-  openedForm: CreateProposalFormStepEnum;
-
-  next: () => void;
-  prev: () => void;
-  save: () => void;
-  checkFormValidity: () => void;
-  checkNavigateValidity: () => void;
-  reset: () => void;
-  patchWalletStep: (value: {
-    balanceVeMENTO: number;
-    balanceMENTO: number;
-    walletAddress: string;
-  }) => void;
-  patchContentStep: (value: { title: string; description: string }) => void;
-  patchExecutionStep: (value: { code: string }) => void;
-}
-
-export const useCreateProposalStore = create<CreateProposalStore>(
-  (set, get) => {
-    return {
-      form: initialCreateProposalForm,
-      next: () => {
-        if (!get().canGoNext || !get().form[get().openedForm].isValid) {
-          return;
-        }
-        get().navigateInForm("next");
-      },
-      prev: () => {
-        if (!get().canGoPrev) {
-          return;
-        }
-        get().navigateInForm("prev");
-      },
-      save: () => {},
-      checkFormValidity: () => {
-        const form = get().form[get().openedForm];
-        const isValid = Object.values(form.value).every((field) =>
-          field.validate(field.value),
-        );
-        set({
-          form: {
-            ...get().form,
-            [get().openedForm]: {
-              ...form,
-              isValid,
-            },
-          },
-        });
-      },
-      navigateInForm: (direction: "next" | "prev") => {
-        const openedIndex = createProposalFormStepOrder.indexOf(
-          get().openedForm,
-        );
-        const nextFormKey =
-          createProposalFormStepOrder[
-            openedIndex + (direction === "next" ? 1 : -1)
-          ];
-
-        set({
-          form: {
-            ...get().form,
-            [get().openedForm]: {
-              ...get().form[get().openedForm],
-              isOpened: false,
-            },
-            [nextFormKey]: {
-              ...get().form[nextFormKey],
-              isOpened: true,
-            },
-          },
-          openedForm: nextFormKey,
-        });
-        get().checkFormValidity();
-        get().checkNavigateValidity();
-      },
-      canGoNext: false,
-      canGoPrev: false,
-      openedForm: CreateProposalFormStepEnum.wallet,
-      checkNavigateValidity: () => {
-        set({
-          canGoNext:
-            get().openedForm !== CreateProposalFormStepEnum.preview &&
-            get().form[get().openedForm].isValid,
-          canGoPrev: get().openedForm !== CreateProposalFormStepEnum.wallet,
-        });
-      },
-      reset: () => {
-        set({
-          form: initialCreateProposalForm,
-          canGoNext: false,
-          canGoPrev: false,
-          openedForm: CreateProposalFormStepEnum.wallet,
-        });
-      },
-      patchWalletStep: (value) => {
-        set({
-          form: {
-            ...get().form,
-            [CreateProposalFormStepEnum.wallet]: {
-              isOpened: get().form[CreateProposalFormStepEnum.wallet].isOpened,
-              isValid: get().form[CreateProposalFormStepEnum.wallet].isValid,
-              value: {
-                walletAddress: {
-                  ...get().form[CreateProposalFormStepEnum.wallet].value
-                    .walletAddress,
-                  value: value.walletAddress,
-                },
-                balanceVeMENTO: {
-                  ...get().form[CreateProposalFormStepEnum.wallet].value
-                    .balanceVeMENTO,
-                  value: value.balanceVeMENTO,
-                },
-                balanceMENTO: {
-                  ...get().form[CreateProposalFormStepEnum.wallet].value
-                    .balanceMENTO,
-                  value: value.balanceMENTO,
-                },
-              },
-            },
-          },
-        });
-        get().checkFormValidity();
-        get().checkNavigateValidity();
-      },
-      patchContentStep: (value) => {
-        set({
-          form: {
-            ...get().form,
-            [CreateProposalFormStepEnum.content]: {
-              isOpened: get().form[CreateProposalFormStepEnum.content].isOpened,
-              isValid: get().form[CreateProposalFormStepEnum.content].isValid,
-              value: {
-                ...get().form[CreateProposalFormStepEnum.content].value,
-                title: {
-                  ...get().form[CreateProposalFormStepEnum.content].value.title,
-                  value: value.title,
-                },
-                description: {
-                  ...get().form[CreateProposalFormStepEnum.content].value
-                    .description,
-                  value: value.description,
-                },
-              },
-            },
-          },
-        });
-        get().checkFormValidity();
-        get().checkNavigateValidity();
-      },
-      patchExecutionStep: (value) => {
-        set({
-          form: {
-            ...get().form,
-            [CreateProposalFormStepEnum.execution]: {
-              isOpened:
-                get().form[CreateProposalFormStepEnum.execution].isOpened,
-              isValid: get().form[CreateProposalFormStepEnum.execution].isValid,
-              value: {
-                code: {
-                  ...get().form[CreateProposalFormStepEnum.execution].value
-                    .code,
-                  value: value.code,
-                },
-              },
-            },
-          },
-        });
-        get().checkFormValidity();
-        get().checkNavigateValidity();
-      },
-    };
-  },
-);
diff --git a/app/store/index.ts b/app/store/index.ts
deleted file mode 100644
index c123caa1..00000000
--- a/app/store/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { useProposalDetailsStore } from "./proposal-details.store";
-export { useUserStore } from "./user.store";
-export { useCreateProposalStore } from "./create-proposal.store";
diff --git a/app/store/proposal-details.store.ts b/app/store/proposal-details.store.ts
deleted file mode 100644
index 46404d6f..00000000
--- a/app/store/proposal-details.store.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { create } from "zustand";
-import { IVote, IVoteType } from "@interfaces/vote.interface";
-
-type ProposalVotesMap = {
-  [key in IVoteType]: IVote[];
-};
-
-interface ProposalDetailsStore {
-  proposal?: any;
-  isFetching: boolean;
-  fetch: (id: string) => Promise<void>;
-  fetchVotes: () => Promise<void>;
-  votes: ProposalVotesMap;
-  vote: (type: IVoteType, value: number, address: string) => Promise<void>;
-  create: (proposal: any) => Promise<void>;
-}
-
-export const useProposalDetailsStore = create<ProposalDetailsStore>(
-  (set, get) => ({
-    proposal: undefined,
-    isFetching: false,
-    votes: {
-      for: [],
-      against: [],
-      abstain: [],
-    },
-    fetch: async (id) => {
-      set({ isFetching: true });
-
-      const proposalResponse = await fetch(`/api/proposals/${id}`);
-
-      const proposalResponseJson = (await proposalResponse.json()) as any;
-
-      const proposal = {
-        ...proposalResponseJson,
-        createdAt: new Date(proposalResponseJson.createdAt),
-        deadlineAt: new Date(proposalResponseJson.deadlineAt),
-      } as any;
-
-      set({ proposal });
-      await get().fetchVotes();
-    },
-    fetchVotes: async () => {
-      set({ isFetching: true });
-
-      const id = get().proposal?.id;
-      if (!id) {
-        return;
-      }
-
-      const votesResponse = await fetch(`/api/proposals/${id}/votes`);
-
-      const votesResponseJson = (await votesResponse.json()) as IVote[];
-
-      const votes: ProposalVotesMap = {
-        for: votesResponseJson.filter((vote: IVote) => vote.type === "for"),
-        against: votesResponseJson.filter(
-          (vote: IVote) => vote.type === "against",
-        ),
-        abstain: votesResponseJson.filter(
-          (vote: IVote) => vote.type === "abstain",
-        ),
-      };
-
-      set({ votes, isFetching: false });
-    },
-    vote: async (type, value, address) => {
-      const id = get().proposal?.id;
-      if (!id) {
-        return;
-      }
-
-      await fetch(`/api/proposals/${id}/votes/${type}`, {
-        method: "PUT",
-        body: JSON.stringify({
-          value,
-          address,
-        }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      await get().fetchVotes();
-    },
-    create: async (proposal) => {
-      await fetch(`/api/proposals`, {
-        method: "PUT",
-        body: JSON.stringify(proposal),
-      });
-    },
-  }),
-);
diff --git a/app/store/user.store.ts b/app/store/user.store.ts
deleted file mode 100644
index 058c93cd..00000000
--- a/app/store/user.store.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { create } from "zustand";
-import { ILock } from "@interfaces/lock.interface";
-
-interface UserStore {
-  walletAddress?: string;
-  locks: ILock[];
-  isFetching: boolean;
-  isReady: boolean;
-  isLocksFetching: boolean;
-  isInitialized: boolean;
-  getBalance: () => Promise<void>;
-  getLocks: () => Promise<void>;
-  initWallet: (walletAddress: string) => Promise<void>;
-  disconnectWallet: () => Promise<void>;
-  balanceMENTO: number;
-  balanceVeMENTO: number;
-  lock: (lock: ILock) => Promise<void>;
-  extendLock: (id: string, date: Date) => Promise<void>;
-}
-
-export const useUserStore = create<UserStore>((set, get) => ({
-  walletAddress: undefined,
-  locks: [],
-  isFetching: false,
-  isReady: false,
-  isLocksFetching: false,
-  isInitialized: false,
-  balanceMENTO: 0,
-  balanceVeMENTO: 0,
-  disconnectWallet: async () => {
-    set({
-      walletAddress: undefined,
-      isInitialized: false,
-      isFetching: false,
-      isLocksFetching: false,
-      isReady: false,
-      locks: [],
-      balanceMENTO: 0,
-      balanceVeMENTO: 0,
-    });
-  },
-  initWallet: async (walletAddress) => {
-    set({ isInitialized: true });
-    set({ isFetching: true });
-    set({ walletAddress });
-
-    await get().getBalance();
-
-    if (get().isLocksFetching) {
-      await get().getLocks();
-    }
-    set({ isReady: true });
-  },
-  getBalance: async () => {
-    set({ isFetching: true });
-
-    const walletAddress = get().walletAddress;
-    if (!walletAddress) {
-      return;
-    }
-
-    const balanceResponse = await fetch(`/api/users/${walletAddress}/balance`);
-
-    const balanceResponseJson = await balanceResponse.json();
-
-    set({
-      balanceMENTO: balanceResponseJson.balanceMENTO,
-      balanceVeMENTO: balanceResponseJson.balanceVeMENTO,
-      isFetching: false,
-    });
-  },
-  getLocks: async () => {
-    set({ isLocksFetching: true });
-
-    const walletAddress = get().walletAddress;
-    if (!walletAddress) {
-      return;
-    }
-
-    const locksResponse = await fetch(`/api/users/${walletAddress}/locks`);
-
-    const locksResponseJson = await locksResponse.json();
-
-    set({
-      locks: locksResponseJson.map((lock: ILock) => ({
-        ...lock,
-        expireDate: new Date(lock.expireDate),
-      })),
-      isLocksFetching: false,
-    });
-  },
-  lock: async (lock) => {
-    set({ isLocksFetching: true });
-
-    const walletAddress = get().walletAddress;
-    if (!walletAddress) {
-      return;
-    }
-
-    const lockResponse = await fetch(`/api/users/${walletAddress}/locks`, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(lock),
-    });
-
-    const lockResponseJson = await lockResponse.json();
-
-    set({
-      locks: [
-        {
-          ...lockResponseJson,
-          expireDate: new Date(lockResponseJson.expireDate),
-        },
-        ...get().locks,
-      ],
-      isLocksFetching: false,
-    });
-
-    await get().getBalance();
-  },
-  extendLock: async (id, date) => {
-    set({ isFetching: true });
-
-    const walletAddress = get().walletAddress;
-    if (!walletAddress) {
-      return;
-    }
-
-    const lockResponse = await fetch(
-      `/api/users/${walletAddress}/locks/${id}/extend`,
-      {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ date }),
-      },
-    );
-
-    const lockResponseJson = await lockResponse.json();
-
-    set({
-      balanceMENTO: lockResponseJson.balanceMENTO,
-      balanceVeMENTO: lockResponseJson.balanceVeMENTO,
-      isFetching: false,
-    });
-  },
-}));
diff --git a/codegen.ts b/codegen.ts
index 767f9070..fc0e2c39 100644
--- a/codegen.ts
+++ b/codegen.ts
@@ -1,6 +1,6 @@
 import { CodegenConfig } from "@graphql-codegen/cli";
 import "dotenv/config";
-import loadEnvVar from "./app/helpers/load-env-var";
+import loadEnvVar from "@/lib/helpers/load-env-var";
 
 const CELO_EXPLORER_API_URL = loadEnvVar(
   process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL,
@@ -12,17 +12,17 @@ const config: CodegenConfig = {
   generates: {
     // NOTE: In case we need to use different subgraph URLs for different environments
     // we'll need to add another element to the object below, i.e. "./app/graphql/subgraph-alfajores/generated"
-    "./app/graphql/subgraph/generated/": {
+    "./src/lib/graphql/subgraph/generated/": {
       schema: [SUBGRAPH_URL, "./schema.client.graphql"],
-      documents: ["app/graphql/subgraph/**/*.graphql"],
+      documents: ["src/lib/graphql/subgraph/**/*.graphql"],
       preset: "client",
       presetConfig: {
         gqlTagName: "gql",
       },
     },
-    "./app/graphql/celo-explorer/generated/": {
+    "./src/lib/graphql/celo-explorer/generated/": {
       schema: CELO_EXPLORER_API_URL,
-      documents: ["app/graphql/celo-explorer/**/*.graphql"],
+      documents: ["src/lib/graphql/celo-explorer/**/*.graphql"],
       preset: "client",
     },
   },
diff --git a/docs/actions/governor/reads.md b/docs/actions/governor/reads.md
index 36d60917..26be3676 100644
--- a/docs/actions/governor/reads.md
+++ b/docs/actions/governor/reads.md
@@ -1,5 +1,9 @@
 # State read actions
+<<<<<<< HEAD
+[Home](../../../README.md) / [Docs](../../index.md) / [Actions](../index.md) / Governor contract read state
+=======
 [Home](../README.md) / [Docs](../index.md) / [Actions](./index.md) / Governor contract read state
+>>>>>>> develop
 
 ## Governor 
 
diff --git a/docs/actions/governor/writes.md b/docs/actions/governor/writes.md
index 944914fc..4e0ba687 100644
--- a/docs/actions/governor/writes.md
+++ b/docs/actions/governor/writes.md
@@ -1,5 +1,9 @@
 # Governor state change actions
+<<<<<<< HEAD
+[Home](../../../README.md) / [Docs](../../index.md) / [Actions](../index.md) / Governor contract state change
+=======
 [Home](../README.md) / [Docs](../index.md) / [Actions](./index.md) / Governor contract state change
+>>>>>>> develop
 
 ### Propose
 #### Prerequisites
diff --git a/docs/actions/index.md b/docs/actions/index.md
index 2e72ea23..809ebe3e 100644
--- a/docs/actions/index.md
+++ b/docs/actions/index.md
@@ -1,8 +1,8 @@
 # Actions overview
 
-[Home](../README.md) / [Docs](../index.md) / Actions 
+[Home](../../README.md) / [Docs](../index.md) / Actions
 
-This section of the docs highlights the different actions, from a state read & state change perspective 
+This section of the docs highlights the different actions, from a state read & state change perspective
 
 - [Wallet Actions](./wallet.md)
 - Mento token actions
@@ -13,4 +13,4 @@ This section of the docs highlights the different actions, from a state read & s
   - [Write](./locking/writes.md)
 - Governor contract actions
   - [Read](./governor/reads.md)
-  - [Write](./governor/writes.md)
\ No newline at end of file
+  - [Write](./governor/writes.md)
diff --git a/docs/actions/locking/reads.md b/docs/actions/locking/reads.md
index 30dddc0b..991e38a3 100644
--- a/docs/actions/locking/reads.md
+++ b/docs/actions/locking/reads.md
@@ -1,5 +1,9 @@
 # State read actions
+<<<<<<< HEAD
+[Home](../../../README.md) / [Docs](../../index.md) / [Actions](../index.md) / Locking contract read state
+=======
 [Home](../README.md) / [Docs](../index.md) / [Actions](./index.md) / Locking contract read state
+>>>>>>> develop
 
 ## Locking
 
diff --git a/docs/actions/locking/writes.md b/docs/actions/locking/writes.md
index 6f2a6003..5a7dee84 100644
--- a/docs/actions/locking/writes.md
+++ b/docs/actions/locking/writes.md
@@ -1,7 +1,9 @@
 # Locking contract state change actions
-[Home](../README.md) / [Docs](../index.md) / [Actions](./index.md) / Locking contract state change
 
-### Lock 
+[Home](../../../README.md) / [Docs](../../index.md) / [Actions](../index.md) / Locking contract state change
+
+### Lock
+
 #### Prerequisites
 
 - Wallet is connected
@@ -12,11 +14,11 @@
 #### Mutations
 
 - **Success**
-    - Balances must be refreshed
-    - Delegate function is now available
-    - Voting function is now available
+  - Balances must be refreshed
+  - Delegate function is now available
+  - Voting function is now available
 
---- 
+---
 
 ### Delegate
 
@@ -30,11 +32,12 @@
 #### Mutations
 
 - **Success**
-    - Balances must be refreshed
+  - Balances must be refreshed
 
 ---
 
 ### LockAndDelegate
+
 #### Prerequisites
 
 - Wallet is connected
@@ -46,30 +49,32 @@
 #### Mutations
 
 - **Success**
-    - Balances must be refreshed
+  - Balances must be refreshed
 
---- 
+---
 
 ### Relock
+
 #### Prerequisites
 
 - Wallet is connected
 - CELO balance equal to or greater than gas cost
 - Lock must be active
 - One of these options must be included:
-    - If changing duration, time must be greater than current lock end period
-    - If changing amount veMENTO balance must be equal to or greater than increasing amount
-    - If changing delegate, delegate must not be `address(0)` or any of the contract addresses
+  - If changing duration, time must be greater than current lock end period
+  - If changing amount veMENTO balance must be equal to or greater than increasing amount
+  - If changing delegate, delegate must not be `address(0)` or any of the contract addresses
 
 #### Mutations
 
 - **Success**
-    - Balances must be refreshed
-    - My Voting power should be refreshed
+  - Balances must be refreshed
+  - My Voting power should be refreshed
 
 ---
 
 ### Withdraw
+
 #### Prerequisites
 
 - Wallet is connected
@@ -79,4 +84,4 @@
 #### Mutations
 
 - **Success**
-    - Balances must be refreshed
+  - Balances must be refreshed
diff --git a/docs/actions/mento/reads.md b/docs/actions/mento/reads.md
index 7dcdbd66..f18a3d52 100644
--- a/docs/actions/mento/reads.md
+++ b/docs/actions/mento/reads.md
@@ -1,5 +1,6 @@
 # State read actions
-[Home](../README.md) / [Docs](../index.md) / [Actions](./index.md) / Mento contract read state
+
+[Home](../../../README.md) / [Docs](../../index.md) / [Actions](../index.md) / Mento contract read state
 
 ## Mento Contract
 
@@ -8,9 +9,10 @@
 #### Mutations
 
 - **Success**
-    - Mento supply parameter updated
+  - Mento supply parameter updated
 
 ### Get Balance
+
 #### Prerequisites
 
 - Wallet is connected
@@ -18,4 +20,4 @@
 #### Mutations
 
 - **Success**
-    - User `MENTO` balance updated
\ No newline at end of file
+  - User `MENTO` balance updated
diff --git a/docs/actions/mento/writes.md b/docs/actions/mento/writes.md
index 9dd712b5..6e011ada 100644
--- a/docs/actions/mento/writes.md
+++ b/docs/actions/mento/writes.md
@@ -1,5 +1,6 @@
 # Mento Token state change actions
-[Home](../README.md) / [Docs](../index.md) / [Actions](./index.md) / Mento Token state change
+
+[Home](../../../README.md) / [Docs](../../index.md) / [Actions](../index.md) / Mento Token state change
 
 ### Approve
 
@@ -12,4 +13,4 @@
 #### Mutations
 
 - **Success**
-    - Locking features are now accessible  
\ No newline at end of file
+  - Locking features are now accessible
diff --git a/docs/actions/wallet.md b/docs/actions/wallet.md
index f4fde0e0..4a464487 100644
--- a/docs/actions/wallet.md
+++ b/docs/actions/wallet.md
@@ -1,6 +1,10 @@
 # Wallet actions
 
+<<<<<<< HEAD
+[Home](../../README.md) / [Docs](../index.md) / [Actions](./index.md) / Wallet
+=======
 [Home](../README.md) / [Docs](../index.md) / [Actions](./index.md) / Wallet
+>>>>>>> develop
 
 ### Is Connected
 #### Mutations
diff --git a/docs/state/contracts.md b/docs/state/contracts.md
index 85aaf24d..94f5ea73 100644
--- a/docs/state/contracts.md
+++ b/docs/state/contracts.md
@@ -1,38 +1,35 @@
 # Contract state overview
 
-[Home](../README.md) / [Docs](../index.md) / Contract State
+[Home](../../README.md) / [Docs](../index.md) / Contract State
 
-
-# Mento 
+# Mento
 
 The core `MENTO` governance token.
 
-| Property | Type | Initial | Source | User dependant? | 
-| --- | --- | --- | --- |  --- | 
-| Balance | BigNumber | 0 | Wagmi | Yes |
-| Approval | BigNumber | 0 | Wagmi | Yes |
-
+| Property | Type      | Initial | Source | User dependant? |
+| -------- | --------- | ------- | ------ | --------------- |
+| Balance  | BigNumber | 0       | Wagmi  | Yes             |
+| Approval | BigNumber | 0       | Wagmi  | Yes             |
 
-# Locking 
+# Locking
 
 This is the `veMENTO` locking contract, this facilitates staking `MENTO` tokens for use in governance.
 
-| Property | Type | Initial | Source | User dependant? | 
-| --- | --- | --- | --- | --- |
-| Locks | Lock[] | [] | Wagmi | Yes |
-| Balance | BigNumber | 0 | Wagmi | Yes |
-| Total Supply | BigNumber | 0 | Wagmi | No |
-| Total Voters | BigNumber | 0 | Wagmi | No |
+| Property     | Type      | Initial | Source | User dependant? |
+| ------------ | --------- | ------- | ------ | --------------- |
+| Locks        | Lock[]    | []      | Wagmi  | Yes             |
+| Balance      | BigNumber | 0       | Wagmi  | Yes             |
+| Total Supply | BigNumber | 0       | Wagmi  | No              |
+| Total Voters | BigNumber | 0       | Wagmi  | No              |
 
 # Governor
 
 This contract facilitates all actions relating to governance proposals
 
-| Property | Type | Initial | Source | User dependant? | 
-| --- | --- | --- | --- | --- |
-| Proposal Threshold | BigNumber | 0 | Wagmi | No |
-| Proposals | Proposal[] | [] | Graph | No |
-| Quorum | BigNumber | 0 | Wagmi | No |
-| Voting Period | BigNumber | 0 | Wagmi |No |
-| Timelock | BigNumber | 0 | Wagmi | No |
-
+| Property           | Type       | Initial | Source | User dependant? |
+| ------------------ | ---------- | ------- | ------ | --------------- |
+| Proposal Threshold | BigNumber  | 0       | Wagmi  | No              |
+| Proposals          | Proposal[] | []      | Graph  | No              |
+| Quorum             | BigNumber  | 0       | Wagmi  | No              |
+| Voting Period      | BigNumber  | 0       | Wagmi  | No              |
+| Timelock           | BigNumber  | 0       | Wagmi  | No              |
diff --git a/docs/state/data-sources.md b/docs/state/data-sources.md
index 161f9e29..b6dff8fc 100644
--- a/docs/state/data-sources.md
+++ b/docs/state/data-sources.md
@@ -1,31 +1,31 @@
 # Data sources
 
-[Home](../README.md) / [Docs](../index.md) / Data Sources
+[Home](../../README.md) / [Docs](../index.md) / Data Sources
 
 These are all the data sources found in the app
 
 ## Chains
 
-| Chain | Chain ID | Rpc | Explorer | Api url |
-| --- | --- | --- | --- | --- |
-| Celo | 42220 | https://forno.celo.org | https://celoscan.io | https://api.celoscan.io/api |
-| Alfajores | 44787 | https://alfajores-forno.celo-testnet.org | https://alfajores.celoscan.io | https://api-alfajores.celoscan.io/api | 
-| Baklava | 62320 | https://baklava-forno.celo-testnet.org | https://baklava-blockscout.celo-testnet.org
+| Chain     | Chain ID | Rpc                                      | Explorer                                    | Api url                               |
+| --------- | -------- | ---------------------------------------- | ------------------------------------------- | ------------------------------------- |
+| Celo      | 42220    | https://forno.celo.org                   | https://celoscan.io                         | https://api.celoscan.io/api           |
+| Alfajores | 44787    | https://alfajores-forno.celo-testnet.org | https://alfajores.celoscan.io               | https://api-alfajores.celoscan.io/api |
+| Baklava   | 62320    | https://baklava-forno.celo-testnet.org   | https://baklava-blockscout.celo-testnet.org |
 
 ## Contracts
 
 For more granular insight, refer to the contracts overview page
 
-| Contract | Abi | Celo address | Alfajores Address | Baklava Address |
-| --- | --- | --- | --- | --- |
-| Mento | ERC20 |  Not deployed | 0xc88f553DC20fc78ce554bfF97C2F4a4E5BDB0134 | Not deployed |
-| Locking | ILocking | Not deployed | 0x8E1707307f04eC9742AD3d8e6D88AE5F506F83cA | Not deployed |
-| Governor | IGovernor | Not deployed | 0xc1d32e3bac67b28d31d7828c8ff160e44c37be1c | Not deployed |
+| Contract | Abi       | Celo address | Alfajores Address                          | Baklava Address |
+| -------- | --------- | ------------ | ------------------------------------------ | --------------- |
+| Mento    | ERC20     | Not deployed | 0xc88f553DC20fc78ce554bfF97C2F4a4E5BDB0134 | Not deployed    |
+| Locking  | ILocking  | Not deployed | 0x8E1707307f04eC9742AD3d8e6D88AE5F506F83cA | Not deployed    |
+| Governor | IGovernor | Not deployed | 0xc1d32e3bac67b28d31d7828c8ff160e44c37be1c | Not deployed    |
 
 ## GraphQL
 
-| Network | Data Source |
-| --- | --- | 
-| Celo | Not deployed |
+| Network   | Data Source                                                                |
+| --------- | -------------------------------------------------------------------------- |
+| Celo      | Not deployed                                                               |
 | Alfajores | https://api.studio.thegraph.com/query/67235/mento-alfajores/version/latest |
-| Baklava | Not deployed |
+| Baklava   | Not deployed                                                               |
diff --git a/package.json b/package.json
index ab3585d2..3d9a8c30 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
   "dependencies": {
     "@apollo/client": "^3.8.9",
     "@apollo/experimental-nextjs-app-support": "^0.8.0",
+    "@apollo/server": "^4.10.1",
+    "@as-integrations/next": "^3.0.0",
     "@hookform/resolvers": "^3.3.2",
     "@mdxeditor/editor": "^1.11.2",
     "@mento-protocol/mento-sdk": "^0.2.2",
@@ -25,7 +27,7 @@
     "date-fns": "^2.30.0",
     "ethereum-blockies": "^0.1.1",
     "graphql": "^16.8.1",
-    "immer": "^10.0.3",
+    "graphql-tag": "^2.12.6",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -37,8 +39,7 @@
     "sass": "^1.68.0",
     "viem": "^2.7.16",
     "wagmi": "^2.5.7",
-    "yup": "^1.3.2",
-    "zustand": "^4.4.7"
+    "yup": "^1.3.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5",
@@ -49,6 +50,7 @@
     "@types/react": "^18",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
     "autoprefixer": "^10.4.18",
     "dotenv": "^16.4.5",
     "eslint": "^8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f655ea6a..88658739 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,12 @@ dependencies:
   '@apollo/experimental-nextjs-app-support':
     specifier: ^0.8.0
     version: 0.8.0(@apollo/client@3.9.6)(next@14.1.3)(react@18.2.0)
+  '@apollo/server':
+    specifier: ^4.10.1
+    version: 4.10.1(graphql@16.8.1)
+  '@as-integrations/next':
+    specifier: ^3.0.0
+    version: 3.0.0(@apollo/server@4.10.1)(next@14.1.3)
   '@hookform/resolvers':
     specifier: ^3.3.2
     version: 3.3.4(react-hook-form@7.51.0)
@@ -38,9 +44,9 @@ dependencies:
   graphql:
     specifier: ^16.8.1
     version: 16.8.1
-  immer:
-    specifier: ^10.0.3
-    version: 10.0.4
+  graphql-tag:
+    specifier: ^2.12.6
+    version: 2.12.6(graphql@16.8.1)
   next:
     specifier: ^14.0.4
     version: 14.1.3(@babel/core@7.24.0)(react-dom@18.2.0)(react@18.2.0)(sass@1.71.1)
@@ -73,13 +79,10 @@ dependencies:
     version: 2.8.5(typescript@5.4.2)
   wagmi:
     specifier: ^2.5.7
-    version: 2.5.7(@tanstack/react-query@5.28.0)(@types/react@18.2.65)(immer@10.0.4)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
+    version: 2.5.7(@tanstack/react-query@5.28.0)(@types/react@18.2.65)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
   yup:
     specifier: ^1.3.2
     version: 1.4.0
-  zustand:
-    specifier: ^4.4.7
-    version: 4.5.2(@types/react@18.2.65)(immer@10.0.4)(react@18.2.0)
 
 devDependencies:
   '@graphql-codegen/cli':
@@ -106,6 +109,9 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18
     version: 18.2.22
+  '@typescript-eslint/eslint-plugin':
+    specifier: ^7.3.1
+    version: 7.3.1(@typescript-eslint/parser@7.3.1)(eslint@8.57.0)(typescript@5.4.2)
   autoprefixer:
     specifier: ^10.4.18
     version: 10.4.18(postcss@8.4.35)
@@ -160,6 +166,14 @@ packages:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  /@apollo/cache-control-types@1.0.3(graphql@16.8.1):
+    resolution: {integrity: sha512-F17/vCp7QVwom9eG7ToauIKdAxpSoadsJnqIfyryLFSkLSOEqu+eC5Z3N8OXcUVStuOMcNHlyraRsA6rRICu4g==}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      graphql: 16.8.1
+    dev: false
+
   /@apollo/client@3.9.6(@types/react@18.2.65)(graphql@16.8.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-+zpddcnZ4G2VZ0xIEnvIHFsLqeopNOnWuE2ZVbRuetLLpj/biLPNN719B/iofdd1/iHRclKfv0XaAmX6PBhYKA==}
     peerDependencies:
@@ -214,6 +228,177 @@ packages:
       ts-invariant: 0.10.3
     dev: false
 
+  /@apollo/protobufjs@1.2.7:
+    resolution: {integrity: sha512-Lahx5zntHPZia35myYDBRuF58tlwPskwHc5CWBZC/4bMKB6siTBWwtMrkqXcsNwQiFSzSx5hKdRPUmemrEp3Gg==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/base64': 1.1.2
+      '@protobufjs/codegen': 2.0.4
+      '@protobufjs/eventemitter': 1.1.0
+      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/float': 1.0.2
+      '@protobufjs/inquire': 1.1.0
+      '@protobufjs/path': 1.1.2
+      '@protobufjs/pool': 1.1.0
+      '@protobufjs/utf8': 1.1.0
+      '@types/long': 4.0.2
+      long: 4.0.0
+    dev: false
+
+  /@apollo/server-gateway-interface@1.1.1(graphql@16.8.1):
+    resolution: {integrity: sha512-pGwCl/po6+rxRmDMFgozKQo2pbsSwE91TpsDBAOgf74CRDPXHHtM88wbwjab0wMMZh95QfR45GGyDIdhY24bkQ==}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      '@apollo/usage-reporting-protobuf': 4.1.1
+      '@apollo/utils.fetcher': 2.0.1
+      '@apollo/utils.keyvaluecache': 2.1.1
+      '@apollo/utils.logger': 2.0.1
+      graphql: 16.8.1
+    dev: false
+
+  /@apollo/server@4.10.1(graphql@16.8.1):
+    resolution: {integrity: sha512-XGMOgTyzV4EBHQq0xQVKFry9hZF7AA/6nxxGLamqdxodhdSdGbU9jrlb5/XDveeGuXP3+5JDdrB2HcziVLJcMA==}
+    engines: {node: '>=14.16.0'}
+    peerDependencies:
+      graphql: ^16.6.0
+    dependencies:
+      '@apollo/cache-control-types': 1.0.3(graphql@16.8.1)
+      '@apollo/server-gateway-interface': 1.1.1(graphql@16.8.1)
+      '@apollo/usage-reporting-protobuf': 4.1.1
+      '@apollo/utils.createhash': 2.0.1
+      '@apollo/utils.fetcher': 2.0.1
+      '@apollo/utils.isnodelike': 2.0.1
+      '@apollo/utils.keyvaluecache': 2.1.1
+      '@apollo/utils.logger': 2.0.1
+      '@apollo/utils.usagereporting': 2.1.0(graphql@16.8.1)
+      '@apollo/utils.withrequired': 2.0.1
+      '@graphql-tools/schema': 9.0.19(graphql@16.8.1)
+      '@josephg/resolvable': 1.0.1
+      '@types/express': 4.17.21
+      '@types/express-serve-static-core': 4.17.43
+      '@types/node-fetch': 2.6.11
+      async-retry: 1.3.3
+      cors: 2.8.5
+      express: 4.19.1
+      graphql: 16.8.1
+      loglevel: 1.9.1
+      lru-cache: 7.18.3
+      negotiator: 0.6.3
+      node-abort-controller: 3.1.1
+      node-fetch: 2.7.0
+      uuid: 9.0.1
+      whatwg-mimetype: 3.0.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
+  /@apollo/usage-reporting-protobuf@4.1.1:
+    resolution: {integrity: sha512-u40dIUePHaSKVshcedO7Wp+mPiZsaU6xjv9J+VyxpoU/zL6Jle+9zWeG98tr/+SZ0nZ4OXhrbb8SNr0rAPpIDA==}
+    dependencies:
+      '@apollo/protobufjs': 1.2.7
+    dev: false
+
+  /@apollo/utils.createhash@2.0.1:
+    resolution: {integrity: sha512-fQO4/ZOP8LcXWvMNhKiee+2KuKyqIcfHrICA+M4lj/h/Lh1H10ICcUtk6N/chnEo5HXu0yejg64wshdaiFitJg==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@apollo/utils.isnodelike': 2.0.1
+      sha.js: 2.4.11
+    dev: false
+
+  /@apollo/utils.dropunuseddefinitions@2.0.1(graphql@16.8.1):
+    resolution: {integrity: sha512-EsPIBqsSt2BwDsv8Wu76LK5R1KtsVkNoO4b0M5aK0hx+dGg9xJXuqlr7Fo34Dl+y83jmzn+UvEW+t1/GP2melA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      graphql: 16.8.1
+    dev: false
+
+  /@apollo/utils.fetcher@2.0.1:
+    resolution: {integrity: sha512-jvvon885hEyWXd4H6zpWeN3tl88QcWnHp5gWF5OPF34uhvoR+DFqcNxs9vrRaBBSY3qda3Qe0bdud7tz2zGx1A==}
+    engines: {node: '>=14'}
+    dev: false
+
+  /@apollo/utils.isnodelike@2.0.1:
+    resolution: {integrity: sha512-w41XyepR+jBEuVpoRM715N2ZD0xMD413UiJx8w5xnAZD2ZkSJnMJBoIzauK83kJpSgNuR6ywbV29jG9NmxjK0Q==}
+    engines: {node: '>=14'}
+    dev: false
+
+  /@apollo/utils.keyvaluecache@2.1.1:
+    resolution: {integrity: sha512-qVo5PvUUMD8oB9oYvq4ViCjYAMWnZ5zZwEjNF37L2m1u528x5mueMlU+Cr1UinupCgdB78g+egA1G98rbJ03Vw==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@apollo/utils.logger': 2.0.1
+      lru-cache: 7.18.3
+    dev: false
+
+  /@apollo/utils.logger@2.0.1:
+    resolution: {integrity: sha512-YuplwLHaHf1oviidB7MxnCXAdHp3IqYV8n0momZ3JfLniae92eYqMIx+j5qJFX6WKJPs6q7bczmV4lXIsTu5Pg==}
+    engines: {node: '>=14'}
+    dev: false
+
+  /@apollo/utils.printwithreducedwhitespace@2.0.1(graphql@16.8.1):
+    resolution: {integrity: sha512-9M4LUXV/fQBh8vZWlLvb/HyyhjJ77/I5ZKu+NBWV/BmYGyRmoEP9EVAy7LCVoY3t8BDcyCAGfxJaLFCSuQkPUg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      graphql: 16.8.1
+    dev: false
+
+  /@apollo/utils.removealiases@2.0.1(graphql@16.8.1):
+    resolution: {integrity: sha512-0joRc2HBO4u594Op1nev+mUF6yRnxoUH64xw8x3bX7n8QBDYdeYgY4tF0vJReTy+zdn2xv6fMsquATSgC722FA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      graphql: 16.8.1
+    dev: false
+
+  /@apollo/utils.sortast@2.0.1(graphql@16.8.1):
+    resolution: {integrity: sha512-eciIavsWpJ09za1pn37wpsCGrQNXUhM0TktnZmHwO+Zy9O4fu/WdB4+5BvVhFiZYOXvfjzJUcc+hsIV8RUOtMw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      graphql: 16.8.1
+      lodash.sortby: 4.7.0
+    dev: false
+
+  /@apollo/utils.stripsensitiveliterals@2.0.1(graphql@16.8.1):
+    resolution: {integrity: sha512-QJs7HtzXS/JIPMKWimFnUMK7VjkGQTzqD9bKD1h3iuPAqLsxd0mUNVbkYOPTsDhUKgcvUOfOqOJWYohAKMvcSA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      graphql: 16.8.1
+    dev: false
+
+  /@apollo/utils.usagereporting@2.1.0(graphql@16.8.1):
+    resolution: {integrity: sha512-LPSlBrn+S17oBy5eWkrRSGb98sWmnEzo3DPTZgp8IQc8sJe0prDgDuppGq4NeQlpoqEHz0hQeYHAOA0Z3aQsxQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      graphql: 14.x || 15.x || 16.x
+    dependencies:
+      '@apollo/usage-reporting-protobuf': 4.1.1
+      '@apollo/utils.dropunuseddefinitions': 2.0.1(graphql@16.8.1)
+      '@apollo/utils.printwithreducedwhitespace': 2.0.1(graphql@16.8.1)
+      '@apollo/utils.removealiases': 2.0.1(graphql@16.8.1)
+      '@apollo/utils.sortast': 2.0.1(graphql@16.8.1)
+      '@apollo/utils.stripsensitiveliterals': 2.0.1(graphql@16.8.1)
+      graphql: 16.8.1
+    dev: false
+
+  /@apollo/utils.withrequired@2.0.1:
+    resolution: {integrity: sha512-YBDiuAX9i1lLc6GeTy1m7DGLFn/gMnvXqlalOIMjM7DeOgIacEjjfwPqb0M1CQ2v11HhR15d1NmxJoRCfrNqcA==}
+    engines: {node: '>=14'}
+    dev: false
+
   /@ardatan/relay-compiler@12.0.0(graphql@16.8.1):
     resolution: {integrity: sha512-9anThAaj1dQr6IGmzBMcfzOQKTa5artjuPmw8NYK/fiGEMjADbSguBY2FMDykt+QhilR3wc9VA/3yVju7JHg7Q==}
     hasBin: true
@@ -252,6 +437,17 @@ packages:
       - encoding
     dev: true
 
+  /@as-integrations/next@3.0.0(@apollo/server@4.10.1)(next@14.1.3):
+    resolution: {integrity: sha512-FmqJjoH5XamyBZQVTnnG9ssE3ywf/TPIanFGwYjp3YFsX92F1lY7FDcrQJa/gCJQnb8gSZAdqAIgrWo4K325sA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@apollo/server': ^4.0.0
+      next: ^12.0.0 || ^13.0.0 || ^14.0.0
+    dependencies:
+      '@apollo/server': 4.10.1(graphql@16.8.1)
+      next: 14.1.3(@babel/core@7.24.0)(react-dom@18.2.0)(react@18.2.0)(sass@1.71.1)
+    dev: false
+
   /@babel/code-frame@7.23.5:
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
     engines: {node: '>=6.9.0'}
@@ -2813,6 +3009,16 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /@graphql-tools/merge@8.4.2(graphql@16.8.1):
+    resolution: {integrity: sha512-XbrHAaj8yDuINph+sAfuq3QCZ/tKblrTLOpirK0+CAgNlZUCHs0Fa+xtMUURgwCVThLle1AF7svJCxFizygLsw==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/utils': 9.2.1(graphql@16.8.1)
+      graphql: 16.8.1
+      tslib: 2.6.2
+    dev: false
+
   /@graphql-tools/merge@9.0.3(graphql@16.8.1):
     resolution: {integrity: sha512-FeKv9lKLMwqDu0pQjPpF59GY3HReUkWXKsMIuMuJQOKh9BETu7zPEFUELvcw8w+lwZkl4ileJsHXC9+AnsT2Lw==}
     engines: {node: '>=16.0.0'}
@@ -2895,6 +3101,18 @@ packages:
       value-or-promise: 1.0.12
     dev: true
 
+  /@graphql-tools/schema@9.0.19(graphql@16.8.1):
+    resolution: {integrity: sha512-oBRPoNBtCkk0zbUsyP4GaIzCt8C0aCI4ycIRUL67KK5pOHljKLBBtGT+Jr6hkzA74C8Gco8bpZPe7aWFjiaK2w==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-tools/merge': 8.4.2(graphql@16.8.1)
+      '@graphql-tools/utils': 9.2.1(graphql@16.8.1)
+      graphql: 16.8.1
+      tslib: 2.6.2
+      value-or-promise: 1.0.12
+    dev: false
+
   /@graphql-tools/url-loader@8.0.2(@types/node@20.11.26)(graphql@16.8.1):
     resolution: {integrity: sha512-1dKp2K8UuFn7DFo1qX5c1cyazQv2h2ICwA9esHblEqCYrgf69Nk8N7SODmsfWg94OEaI74IqMoM12t7eIGwFzQ==}
     engines: {node: '>=16.0.0'}
@@ -2935,6 +3153,16 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /@graphql-tools/utils@9.2.1(graphql@16.8.1):
+    resolution: {integrity: sha512-WUw506Ql6xzmOORlriNrD6Ugx+HjVgYxt9KCXD9mHAak+eaXSwuGGPyE60hy9xaDEoXKBsG7SkG69ybitaVl6A==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+    dependencies:
+      '@graphql-typed-document-node/core': 3.2.0(graphql@16.8.1)
+      graphql: 16.8.1
+      tslib: 2.6.2
+    dev: false
+
   /@graphql-tools/wrap@10.0.5(graphql@16.8.1):
     resolution: {integrity: sha512-Cbr5aYjr3HkwdPvetZp1cpDWTGdD1Owgsb3z/ClzhmrboiK86EnQDxDvOJiQkDCPWE9lNBwj8Y4HfxroY0D9DQ==}
     engines: {node: '>=16.0.0'}
@@ -3074,6 +3302,10 @@ packages:
       chalk: 4.1.2
     dev: false
 
+  /@josephg/resolvable@1.0.1:
+    resolution: {integrity: sha512-CtzORUwWTTOTqfVtHaKRJ0I1kNQd1bpn3sUh8I3nJDVY+5/M/Oe1DnEWzPQvqq/xPIIkzzzIP7mfCoAjFRvDhg==}
+    dev: false
+
   /@jridgewell/gen-mapping@0.3.5:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
@@ -4044,6 +4276,49 @@ packages:
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
     dev: true
 
+  /@protobufjs/aspromise@1.1.2:
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+    dev: false
+
+  /@protobufjs/base64@1.1.2:
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+    dev: false
+
+  /@protobufjs/codegen@2.0.4:
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+    dev: false
+
+  /@protobufjs/eventemitter@1.1.0:
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+    dev: false
+
+  /@protobufjs/fetch@1.1.0:
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/inquire': 1.1.0
+    dev: false
+
+  /@protobufjs/float@1.0.2:
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+    dev: false
+
+  /@protobufjs/inquire@1.1.0:
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+    dev: false
+
+  /@protobufjs/path@1.1.2:
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+    dev: false
+
+  /@protobufjs/pool@1.1.0:
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+    dev: false
+
+  /@protobufjs/utf8@1.1.0:
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+    dev: false
+
   /@radix-ui/colors@0.1.9:
     resolution: {integrity: sha512-Vxq944ErPJsdVepjEUhOLO9ApUVOocA63knc+V2TkJ09D/AVOjiMIgkca/7VoYgODcla0qbSIBjje0SMfZMbAw==}
     dev: false
@@ -4857,7 +5132,7 @@ packages:
       react-remove-scroll: 2.5.7(@types/react@18.2.65)(react@18.2.0)
       ua-parser-js: 1.0.37
       viem: 2.8.5(typescript@5.4.2)
-      wagmi: 2.5.7(@tanstack/react-query@5.28.0)(@types/react@18.2.65)(immer@10.0.4)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
+      wagmi: 2.5.7(@tanstack/react-query@5.28.0)(@types/react@18.2.65)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -5495,6 +5770,13 @@ packages:
       '@types/estree': 1.0.5
     dev: false
 
+  /@types/body-parser@1.19.5:
+    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 20.11.26
+    dev: false
+
   /@types/chrome@0.0.136:
     resolution: {integrity: sha512-XDEiRhLkMd+SB7Iw3ZUIj/fov3wLd4HyTdLltVszkgl1dBfc3Rb7oPMVZ2Mz2TLqnF7Ow+StbR8E7r9lqpb4DA==}
     dependencies:
@@ -5502,6 +5784,12 @@ packages:
       '@types/har-format': 1.2.15
     dev: false
 
+  /@types/connect@3.4.38:
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+    dependencies:
+      '@types/node': 20.11.26
+    dev: false
+
   /@types/debug@4.1.12:
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
     dependencies:
@@ -5526,6 +5814,24 @@ packages:
     resolution: {integrity: sha512-jNYm7AK2zXorjV+B0mYWrzqKQ2+AY5vSJSVUU4/YrJnxLheBBwCEVTlCLNDZsWZ7mH6qHsAtLpwuQLlDs2+P0A==}
     dev: true
 
+  /@types/express-serve-static-core@4.17.43:
+    resolution: {integrity: sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==}
+    dependencies:
+      '@types/node': 20.11.26
+      '@types/qs': 6.9.14
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.4
+    dev: false
+
+  /@types/express@4.17.21:
+    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
+    dependencies:
+      '@types/body-parser': 1.19.5
+      '@types/express-serve-static-core': 4.17.43
+      '@types/qs': 6.9.14
+      '@types/serve-static': 1.15.5
+    dev: false
+
   /@types/filesystem@0.0.35:
     resolution: {integrity: sha512-1eKvCaIBdrD2mmMgy5dwh564rVvfEhZTWVQQGRNn0Nt4ZEnJ0C8oSUCzvMKRA4lGde5oEVo+q2MrTTbV/GHDCQ==}
     dependencies:
@@ -5552,6 +5858,10 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
+  /@types/http-errors@2.0.4:
+    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
+    dev: false
+
   /@types/istanbul-lib-coverage@2.0.6:
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
     dev: false
@@ -5572,6 +5882,10 @@ packages:
     resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
     dev: true
 
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
+
   /@types/json-stable-stringify@1.0.36:
     resolution: {integrity: sha512-b7bq23s4fgBB76n34m2b3RBf6M369B0Z9uRR8aHTMd8kZISRkmDEpPD8hhpYvDFzr3bJCPES96cm3Q6qRNDbQw==}
     dev: true
@@ -5580,6 +5894,10 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/long@4.0.2:
+    resolution: {integrity: sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==}
+    dev: false
+
   /@types/mdast@3.0.15:
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
     dependencies:
@@ -5592,10 +5910,25 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
+  /@types/mime@1.3.5:
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+    dev: false
+
+  /@types/mime@3.0.4:
+    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
+    dev: false
+
   /@types/ms@0.7.34:
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
     dev: false
 
+  /@types/node-fetch@2.6.11:
+    resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==}
+    dependencies:
+      '@types/node': 20.11.26
+      form-data: 4.0.0
+    dev: false
+
   /@types/node@20.11.26:
     resolution: {integrity: sha512-YwOMmyhNnAWijOBQweOJnQPl068Oqd4K3OFbTc6AHJwzweUwwWG3GIFY74OKks2PJUDkQPeddOQES9mLn1CTEQ==}
     dependencies:
@@ -5612,6 +5945,14 @@ packages:
   /@types/prop-types@15.7.11:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
 
+  /@types/qs@6.9.14:
+    resolution: {integrity: sha512-5khscbd3SwWMhFqylJBLQ0zIu7c1K6Vz0uBIt915BI3zV0q1nfjRQD3RqSBcPaO6PHEF4ov/t9y89fSiyThlPA==}
+    dev: false
+
+  /@types/range-parser@1.2.7:
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+    dev: false
+
   /@types/react-copy-to-clipboard@5.0.7:
     resolution: {integrity: sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==}
     dependencies:
@@ -5639,6 +5980,25 @@ packages:
       '@types/node': 20.11.26
     dev: false
 
+  /@types/semver@7.5.8:
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+    dev: true
+
+  /@types/send@0.17.4:
+    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 20.11.26
+    dev: false
+
+  /@types/serve-static@1.15.5:
+    resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
+    dependencies:
+      '@types/http-errors': 2.0.4
+      '@types/mime': 3.0.4
+      '@types/node': 20.11.26
+    dev: false
+
   /@types/stack-utils@2.0.3:
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
     dev: false
@@ -5677,6 +6037,35 @@ packages:
       '@types/yargs-parser': 21.0.3
     dev: false
 
+  /@typescript-eslint/eslint-plugin@7.3.1(@typescript-eslint/parser@7.3.1)(eslint@8.57.0)(typescript@5.4.2):
+    resolution: {integrity: sha512-STEDMVQGww5lhCuNXVSQfbfuNII5E08QWkvAw5Qwf+bj2WT+JkG1uc+5/vXA3AOYMDHVOSpL+9rcbEUiHIm2dw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^7.0.0
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 7.3.1(eslint@8.57.0)(typescript@5.4.2)
+      '@typescript-eslint/scope-manager': 7.3.1
+      '@typescript-eslint/type-utils': 7.3.1(eslint@8.57.0)(typescript@5.4.2)
+      '@typescript-eslint/utils': 7.3.1(eslint@8.57.0)(typescript@5.4.2)
+      '@typescript-eslint/visitor-keys': 7.3.1
+      debug: 4.3.4
+      eslint: 8.57.0
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      natural-compare: 1.4.0
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.2)
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -5698,6 +6087,27 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.4.2):
+    resolution: {integrity: sha512-Rq49+pq7viTRCH48XAbTA+wdLRrB/3sRq4Lpk0oGDm0VmnjBrAOVXH/Laalmwsv2VpekiEfVFwJYVk6/e8uvQw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 7.3.1
+      '@typescript-eslint/types': 7.3.1
+      '@typescript-eslint/typescript-estree': 7.3.1(typescript@5.4.2)
+      '@typescript-eslint/visitor-keys': 7.3.1
+      debug: 4.3.4
+      eslint: 8.57.0
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/scope-manager@6.21.0:
     resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -5706,11 +6116,44 @@ packages:
       '@typescript-eslint/visitor-keys': 6.21.0
     dev: true
 
+  /@typescript-eslint/scope-manager@7.3.1:
+    resolution: {integrity: sha512-fVS6fPxldsKY2nFvyT7IP78UO1/I2huG+AYu5AMjCT9wtl6JFiDnsv4uad4jQ0GTFzcUV5HShVeN96/17bTBag==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.3.1
+      '@typescript-eslint/visitor-keys': 7.3.1
+    dev: true
+
+  /@typescript-eslint/type-utils@7.3.1(eslint@8.57.0)(typescript@5.4.2):
+    resolution: {integrity: sha512-iFhaysxFsMDQlzJn+vr3OrxN8NmdQkHks4WaqD4QBnt5hsq234wcYdyQ9uquzJJIDAj5W4wQne3yEsYA6OmXGw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 7.3.1(typescript@5.4.2)
+      '@typescript-eslint/utils': 7.3.1(eslint@8.57.0)(typescript@5.4.2)
+      debug: 4.3.4
+      eslint: 8.57.0
+      ts-api-utils: 1.3.0(typescript@5.4.2)
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/types@6.21.0:
     resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
+  /@typescript-eslint/types@7.3.1:
+    resolution: {integrity: sha512-2tUf3uWggBDl4S4183nivWQ2HqceOZh1U4hhu4p1tPiIJoRRXrab7Y+Y0p+dozYwZVvLPRI6r5wKe9kToF9FIw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dev: true
+
   /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.2):
     resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -5733,6 +6176,47 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree@7.3.1(typescript@5.4.2):
+    resolution: {integrity: sha512-tLpuqM46LVkduWP7JO7yVoWshpJuJzxDOPYIVWUUZbW+4dBpgGeUdl/fQkhuV0A8eGnphYw3pp8d2EnvPOfxmQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 7.3.1
+      '@typescript-eslint/visitor-keys': 7.3.1
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.2)
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@7.3.1(eslint@8.57.0)(typescript@5.4.2):
+    resolution: {integrity: sha512-jIERm/6bYQ9HkynYlNZvXpzmXWZGhMbrOvq3jJzOSOlKXsVjrrolzWBjDW6/TvT5Q3WqaN4EkmcfdQwi9tDjBQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 7.3.1
+      '@typescript-eslint/types': 7.3.1
+      '@typescript-eslint/typescript-estree': 7.3.1(typescript@5.4.2)
+      eslint: 8.57.0
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/visitor-keys@6.21.0:
     resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -5741,6 +6225,14 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
+  /@typescript-eslint/visitor-keys@7.3.1:
+    resolution: {integrity: sha512-9RMXwQF8knsZvfv9tdi+4D/j7dMG28X/wMJ8Jj6eOHyHWwDW4ngQJcqEczSsqIKKjFiLFr40Mnr7a5ulDD3vmw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.3.1
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -5792,7 +6284,7 @@ packages:
       '@metamask/sdk': 0.14.3(@types/react@18.2.65)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)
       '@safe-global/safe-apps-provider': 0.18.1(typescript@5.4.2)
       '@safe-global/safe-apps-sdk': 8.1.0(typescript@5.4.2)
-      '@wagmi/core': 2.6.5(@types/react@18.2.65)(immer@10.0.4)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
+      '@wagmi/core': 2.6.5(@types/react@18.2.65)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
       '@walletconnect/ethereum-provider': 2.11.1(@types/react@18.2.65)(react@18.2.0)
       '@walletconnect/modal': 2.6.2(@types/react@18.2.65)(react@18.2.0)
       typescript: 5.4.2
@@ -5823,7 +6315,7 @@ packages:
       - zod
     dev: false
 
-  /@wagmi/core@2.6.5(@types/react@18.2.65)(immer@10.0.4)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5):
+  /@wagmi/core@2.6.5(@types/react@18.2.65)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5):
     resolution: {integrity: sha512-DLyrc0o+dx05oIhBJuxnS7ekS5e6rB5mytlqPme+Km7aLdeBdcfYB4yJyYCyWoi93OLa7M5sbflTttz3o56bKw==}
     peerDependencies:
       '@tanstack/query-core': '>=5.0.0'
@@ -5839,7 +6331,7 @@ packages:
       mipd: 0.0.5(typescript@5.4.2)
       typescript: 5.4.2
       viem: 2.8.5(typescript@5.4.2)
-      zustand: 4.4.1(@types/react@18.2.65)(immer@10.0.4)(react@18.2.0)
+      zustand: 4.4.1(@types/react@18.2.65)(react@18.2.0)
     transitivePeerDependencies:
       - '@types/react'
       - bufferutil
@@ -6499,6 +6991,10 @@ packages:
       is-array-buffer: 3.0.4
     dev: true
 
+  /array-flatten@1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+    dev: false
+
   /array-includes@3.1.7:
     resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
     engines: {node: '>= 0.4'}
@@ -6644,12 +7140,22 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /async-retry@1.3.3:
+    resolution: {integrity: sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==}
+    dependencies:
+      retry: 0.13.1
+    dev: false
+
   /asynciterator.prototype@1.0.0:
     resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
     dependencies:
       has-symbols: 1.0.3
     dev: true
 
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
   /atomic-sleep@1.0.0:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
@@ -6826,6 +7332,26 @@ packages:
     resolution: {integrity: sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==}
     dev: false
 
+  /body-parser@1.20.2:
+    resolution: {integrity: sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.0
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.11.0
+      raw-body: 2.5.2
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /bowser@2.11.0:
     resolution: {integrity: sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==}
     dev: false
@@ -6903,6 +7429,11 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
+  /bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+    dev: false
+
   /call-bind@1.0.7:
     resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
     engines: {node: '>= 0.4'}
@@ -7239,6 +7770,13 @@ packages:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
 
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
     dev: false
@@ -7324,6 +7862,18 @@ packages:
       upper-case: 2.0.2
     dev: true
 
+  /content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
+  /content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /convert-source-map@1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
     dev: false
@@ -7335,6 +7885,15 @@ packages:
     resolution: {integrity: sha512-mWYvfOLrfEc996hlKcdABeIiPHUPC6DM2QYZdGGOvhOTbA3tjm2eBwqlJpoFdjC89NI4Qt6h0Pu06Mp+1Pj5OQ==}
     dev: false
 
+  /cookie-signature@1.0.6:
+    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
+    dev: false
+
+  /cookie@0.6.0:
+    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /copy-anything@3.0.5:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
@@ -7358,6 +7917,14 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
 
+  /cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+    dev: false
+
   /cosmiconfig@5.2.1:
     resolution: {integrity: sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==}
     engines: {node: '>=4'}
@@ -7580,6 +8147,11 @@ packages:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
     dev: false
 
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /denodeify@1.2.1:
     resolution: {integrity: sha512-KNTihKNmQENUZeKu5fzfpzRqR5S2VMp4gl9RFHiWzj9DfvYQPMJ6XHKNaQxaGCXwPk6y9yme3aUoaiAe+KX+vg==}
     dev: false
@@ -8017,7 +8589,7 @@ packages:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.3.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.0(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0)
@@ -8057,7 +8629,7 @@ packages:
       enhanced-resolve: 5.16.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.3.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.3
       is-core-module: 2.13.1
@@ -8099,7 +8671,36 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
+  /eslint-module-utils@2.8.1(@typescript-eslint/parser@7.3.1)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
+    resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 7.3.1(eslint@8.57.0)(typescript@5.4.2)
+      debug: 3.2.7
+      eslint: 8.57.0
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.3.1)(eslint@8.57.0):
     resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -8109,7 +8710,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.2)
+      '@typescript-eslint/parser': 7.3.1(eslint@8.57.0)(typescript@5.4.2)
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.4
       array.prototype.flat: 1.3.2
@@ -8118,7 +8719,7 @@ packages:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.3.1)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -8483,6 +9084,45 @@ packages:
       strip-final-newline: 3.0.0
     dev: false
 
+  /express@4.19.1:
+    resolution: {integrity: sha512-K4w1/Bp7y8iSiVObmCrtq8Cs79XjJc/RU2YYkZQ7wpUu5ZyZ7MtPHkqoMz4pf+mgXfNvo2qft8D9OnrH2ABk9w==}
+    engines: {node: '>= 0.10.0'}
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.2
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.6.0
+      cookie-signature: 1.0.6
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.2.0
+      fresh: 0.5.2
+      http-errors: 2.0.0
+      merge-descriptors: 1.0.1
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.7
+      proxy-addr: 2.0.7
+      qs: 6.11.0
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.18.0
+      serve-static: 1.15.0
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /ext@1.7.0:
     resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
     dependencies:
@@ -8652,6 +9292,21 @@ packages:
       - supports-color
     dev: false
 
+  /finalhandler@1.2.0:
+    resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.1
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /find-cache-dir@2.1.0:
     resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==}
     engines: {node: '>=6'}
@@ -8721,11 +9376,25 @@ packages:
       signal-exit: 4.1.0
     dev: true
 
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
     engines: {node: '>=0.4.x'}
     dev: false
 
+  /forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
@@ -9364,7 +10033,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       safer-buffer: 2.1.2
-    dev: true
 
   /idb-keyval@6.2.1:
     resolution: {integrity: sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==}
@@ -9386,10 +10054,6 @@ packages:
       queue: 6.0.2
     dev: false
 
-  /immer@10.0.4:
-    resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==}
-    dev: false
-
   /immutable@3.7.6:
     resolution: {integrity: sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==}
     engines: {node: '>=0.8.0'}
@@ -9493,6 +10157,11 @@ packages:
       - supports-color
     dev: false
 
+  /ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
   /iron-webcrypto@1.1.0:
     resolution: {integrity: sha512-5vgYsCakNlaQub1orZK5QmNYhwYtcllTkZBp5sfIaCqY93Cf6l+v2rtE+E4TMbcfjxDMCdrO8wmp7+ZvhDECLA==}
     dev: false
@@ -10359,7 +11028,6 @@ packages:
 
   /lodash.sortby@4.7.0:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
-    dev: true
 
   /lodash.throttle@4.1.1:
     resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
@@ -10395,6 +11063,15 @@ packages:
       yargs: 15.4.1
     dev: false
 
+  /loglevel@1.9.1:
+    resolution: {integrity: sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
+  /long@4.0.0:
+    resolution: {integrity: sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==}
+    dev: false
+
   /longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
     dev: false
@@ -10432,6 +11109,11 @@ packages:
     dependencies:
       yallist: 4.0.0
 
+  /lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -10690,10 +11372,19 @@ packages:
       '@babel/runtime': 7.24.0
     dev: false
 
+  /media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
     dev: false
 
+  /merge-descriptors@1.0.1:
+    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
+    dev: false
+
   /merge-options@3.0.4:
     resolution: {integrity: sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==}
     engines: {node: '>=10'}
@@ -10722,6 +11413,11 @@ packages:
       '@types/node': 20.11.26
     dev: true
 
+  /methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /metro-babel-transformer@0.80.6:
     resolution: {integrity: sha512-ssuoVC4OzqaOt3LpwfUbDfBlFGRu9v1Yf2JJnKPz0ROYHNjSBws4aUesqQQ/Ea8DbiH7TK4j4cJmm+XjdHmgqA==}
     engines: {node: '>=18'}
@@ -11771,7 +12467,6 @@ packages:
 
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
-    dev: true
 
   /object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
@@ -12125,6 +12820,10 @@ packages:
       minipass: 7.0.4
     dev: true
 
+  /path-to-regexp@0.1.7:
+    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
+    dev: false
+
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -12401,6 +13100,14 @@ packages:
     resolution: {integrity: sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==}
     dev: false
 
+  /proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+    dev: false
+
   /proxy-compare@2.5.1:
     resolution: {integrity: sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==}
     dev: false
@@ -12458,6 +13165,13 @@ packages:
       yargs: 15.4.1
     dev: false
 
+  /qs@6.11.0:
+    resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
+    engines: {node: '>=0.6'}
+    dependencies:
+      side-channel: 1.0.6
+    dev: false
+
   /query-string@7.1.3:
     resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
     engines: {node: '>=6'}
@@ -12491,6 +13205,16 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /raw-body@2.5.2:
+    resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+    dev: false
+
   /react-copy-to-clipboard@5.1.0(react@18.2.0):
     resolution: {integrity: sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==}
     peerDependencies:
@@ -13020,6 +13744,11 @@ packages:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
+  /retry@0.13.1:
+    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
+    engines: {node: '>= 4'}
+    dev: false
+
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -13115,7 +13844,6 @@ packages:
 
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-    dev: true
 
   /sass@1.71.1:
     resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
@@ -13291,7 +14019,6 @@ packages:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
       object-inspect: 1.13.1
-    dev: true
 
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
@@ -13943,6 +14670,14 @@ packages:
     engines: {node: '>=12.20'}
     dev: false
 
+  /type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+    dev: false
+
   /type@2.7.2:
     resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
     dev: false
@@ -14362,6 +15097,11 @@ packages:
     hasBin: true
     dev: false
 
+  /uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+    dev: false
+
   /uvu@0.5.6:
     resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
     engines: {node: '>=8'}
@@ -14394,7 +15134,6 @@ packages:
   /value-or-promise@1.0.12:
     resolution: {integrity: sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==}
     engines: {node: '>=12'}
-    dev: true
 
   /vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
@@ -14505,7 +15244,7 @@ packages:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
     dev: false
 
-  /wagmi@2.5.7(@tanstack/react-query@5.28.0)(@types/react@18.2.65)(immer@10.0.4)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5):
+  /wagmi@2.5.7(@tanstack/react-query@5.28.0)(@types/react@18.2.65)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5):
     resolution: {integrity: sha512-xSuteMXFKvra4xDddqZbZv/gQlcg3X+To5AoZW7WoAm0iVlF8/vEGpQzCWy6KZs2z1szxPrr0YnH3Zr1Qj4E/A==}
     peerDependencies:
       '@tanstack/react-query': '>=5.0.0'
@@ -14518,7 +15257,7 @@ packages:
     dependencies:
       '@tanstack/react-query': 5.28.0(react@18.2.0)
       '@wagmi/connectors': 4.1.14(@types/react@18.2.65)(@wagmi/core@2.6.5)(react-dom@18.2.0)(react-native@0.73.6)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
-      '@wagmi/core': 2.6.5(@types/react@18.2.65)(immer@10.0.4)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
+      '@wagmi/core': 2.6.5(@types/react@18.2.65)(react@18.2.0)(typescript@5.4.2)(viem@2.8.5)
       react: 18.2.0
       typescript: 5.4.2
       use-sync-external-store: 1.2.0(react@18.2.0)
@@ -14602,6 +15341,11 @@ packages:
     resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
     dev: false
 
+  /whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+    dev: false
+
   /whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:
@@ -14890,7 +15634,7 @@ packages:
     resolution: {integrity: sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==}
     dev: false
 
-  /zustand@4.4.1(@types/react@18.2.65)(immer@10.0.4)(react@18.2.0):
+  /zustand@4.4.1(@types/react@18.2.65)(react@18.2.0):
     resolution: {integrity: sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==}
     engines: {node: '>=12.7.0'}
     peerDependencies:
@@ -14906,28 +15650,6 @@ packages:
         optional: true
     dependencies:
       '@types/react': 18.2.65
-      immer: 10.0.4
-      react: 18.2.0
-      use-sync-external-store: 1.2.0(react@18.2.0)
-    dev: false
-
-  /zustand@4.5.2(@types/react@18.2.65)(immer@10.0.4)(react@18.2.0):
-    resolution: {integrity: sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==}
-    engines: {node: '>=12.7.0'}
-    peerDependencies:
-      '@types/react': '>=16.8'
-      immer: '>=9.0.6'
-      react: '>=16.8'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      immer:
-        optional: true
-      react:
-        optional: true
-    dependencies:
-      '@types/react': 18.2.65
-      immer: 10.0.4
       react: 18.2.0
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
diff --git a/app/favicon.ico b/public/favicon.ico
similarity index 100%
rename from app/favicon.ico
rename to public/favicon.ico
diff --git a/app/(routes)/create-proposal/page.module.scss b/src/app/(routes)/create-proposal/page.module.scss
similarity index 87%
rename from app/(routes)/create-proposal/page.module.scss
rename to src/app/(routes)/create-proposal/page.module.scss
index 3c3ab132..47ffb76c 100644
--- a/app/(routes)/create-proposal/page.module.scss
+++ b/src/app/(routes)/create-proposal/page.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .form_wrapper {
   max-width: 900px;
diff --git a/src/app/(routes)/create-proposal/page.tsx b/src/app/(routes)/create-proposal/page.tsx
new file mode 100644
index 00000000..7533a209
--- /dev/null
+++ b/src/app/(routes)/create-proposal/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+import {
+  CreateProposalExecutionStep,
+  CreateProposalContentStep,
+  CreateProposalWalletStep,
+  CreateProposalPreviewStep,
+} from "@/components/create-proposal";
+import styles from "./page.module.scss";
+import { CreateProposalProvider } from "@/components/create-proposal/create-proposal-provider";
+
+const Page = () => {
+  return (
+    <CreateProposalProvider>
+      <main className="flex flex-col place-items-center">
+        <h2 className="text-2xl font-bold mb-5">Create a Proposal</h2>
+        <div className={styles.form_wrapper}>
+          <CreateProposalWalletStep />
+          <CreateProposalContentStep />
+          <CreateProposalExecutionStep />
+          <CreateProposalPreviewStep />
+        </div>
+      </main>
+    </CreateProposalProvider>
+  );
+};
+
+export default Page;
diff --git a/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx
similarity index 83%
rename from app/(routes)/layout.tsx
rename to src/app/(routes)/layout.tsx
index 6ff4ce02..5624f203 100644
--- a/app/(routes)/layout.tsx
+++ b/src/app/(routes)/layout.tsx
@@ -1,12 +1,12 @@
 "use client";
-import "../globals.scss";
-import "@rainbow-me/rainbowkit/styles.css";
-import { Inter } from "next/font/google";
-import { Footer, Header, Breadcrumbs } from "@components/_shared";
 import React, { ReactNode } from "react";
+import { Inter } from "next/font/google";
+import { Footer, Header, Breadcrumbs } from "@/components/_shared";
+import "@rainbow-me/rainbowkit/styles.css";
+import "@/styles/globals.scss";
 import { Providers } from "@/app/(routes)/providers";
-import { ModalProvider } from "@/app/providers/modal.provider";
-import { useParams, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
+import { ModalProvider } from "@/lib/providers/modal.provider";
 
 const inter = Inter({
   subsets: ["latin"],
diff --git a/app/(routes)/my-voting-power/page.tsx b/src/app/(routes)/my-voting-power/page.tsx
similarity index 86%
rename from app/(routes)/my-voting-power/page.tsx
rename to src/app/(routes)/my-voting-power/page.tsx
index eded6b27..725d4bee 100644
--- a/app/(routes)/my-voting-power/page.tsx
+++ b/src/app/(routes)/my-voting-power/page.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { Card, Loader, MentoLock } from "@components/_shared";
-import { LocksList } from "@components/locks-list/locks-list.component";
 import { useAccount } from "wagmi";
+import { Card, Loader } from "@/components/_shared";
+import { LocksList } from "@/components/locks-list/locks-list.component";
 
 const Page = () => {
   const { address, isConnecting, isDisconnected } = useAccount();
diff --git a/app/(routes)/page.tsx b/src/app/(routes)/page.tsx
similarity index 78%
rename from app/(routes)/page.tsx
rename to src/app/(routes)/page.tsx
index 019bc5db..a11606af 100644
--- a/app/(routes)/page.tsx
+++ b/src/app/(routes)/page.tsx
@@ -1,6 +1,8 @@
 "use client";
-import { MentoIcon } from "@components/_icons/mento.icon";
-import { MentoTextLogoIcon, CeloLogoIcon } from "@components/_icons";
+import { Suspense } from "react";
+import { useRouter } from "next/navigation";
+import { MentoIcon } from "@/components/_icons/mento.icon";
+import { MentoTextLogoIcon, CeloLogoIcon } from "@/components/_icons";
 import {
   Badge,
   Button,
@@ -8,19 +10,17 @@ import {
   Divider,
   DropdownButton,
   Expandable,
-} from "@components/_shared";
-import { ProposalsListComponent } from "@components/proposals-list/proposals-list.component";
-import { Loader } from "@components/_shared";
-import NumbersService from "@/app/helpers/numbers.service";
-import { ContractParams } from "@components/contract-params/contract-params.component";
-import { useRouter } from "next/navigation";
-import { useUserStore } from "@/app/store";
-import { Suspense } from "react";
-import ProposalSummaryComponent from "@components/proposal-summary/proposal-summary.component";
+} from "@/components/_shared";
+import { ProposalsListComponent } from "@/components/proposals-list/proposals-list.component";
+import { Loader } from "@/components/_shared";
+import { ContractParams } from "@/components/contract-params/contract-params.component";
+import ProposalSummaryComponent from "@/components/proposal-summary/proposal-summary.component";
+import { useAccount } from "wagmi";
 
 const Page = () => {
   const router = useRouter();
-  const { walletAddress } = useUserStore();
+  const { address } = useAccount();
+
   return (
     <main className="flex flex-col place-items-center mt-x11">
       <div className="max-w-full">
@@ -45,11 +45,7 @@ const Page = () => {
               <Button theme="clear" href="/create-proposal">
                 Create new proposal
               </Button>
-              <Button
-                theme="clear"
-                href="/my-voting-power"
-                disabled={!walletAddress}
-              >
+              <Button theme="clear" href="/my-voting-power" disabled={!address}>
                 My voting power
               </Button>
             </div>
diff --git a/app/(routes)/proposals/[id]/_components/execution-code.component.tsx b/src/app/(routes)/proposals/[id]/_components/execution-code.component.tsx
similarity index 96%
rename from app/(routes)/proposals/[id]/_components/execution-code.component.tsx
rename to src/app/(routes)/proposals/[id]/_components/execution-code.component.tsx
index f762a4ad..d0563fc7 100644
--- a/app/(routes)/proposals/[id]/_components/execution-code.component.tsx
+++ b/src/app/(routes)/proposals/[id]/_components/execution-code.component.tsx
@@ -1,13 +1,13 @@
-import BlockExplorerLink from "@/app/components/_shared/block-explorer-link/block-explorer-link.component";
+import { useMemo } from "react";
+import { decodeFunctionData } from "viem";
+import { useChainId } from "wagmi";
+import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr";
+import BlockExplorerLink from "@/components/_shared/block-explorer-link/block-explorer-link.component";
 import {
   GetContractsInfo,
   type GetContractsInfoQuery,
   type ProposalCall,
-} from "@/app/graphql";
-import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr";
-import { useMemo } from "react";
-import { decodeFunctionData } from "viem";
-import { useChainId } from "wagmi";
+} from "@/lib/graphql";
 
 type Props = {
   calls: ProposalCall[];
diff --git a/app/(routes)/proposals/[id]/_components/participants.component.tsx b/src/app/(routes)/proposals/[id]/_components/participants.component.tsx
similarity index 77%
rename from app/(routes)/proposals/[id]/_components/participants.component.tsx
rename to src/app/(routes)/proposals/[id]/_components/participants.component.tsx
index 3aa379b8..ef1de867 100644
--- a/app/(routes)/proposals/[id]/_components/participants.component.tsx
+++ b/src/app/(routes)/proposals/[id]/_components/participants.component.tsx
@@ -1,7 +1,7 @@
-import { Card, TabList } from "@/app/components/_shared";
-import { VotesList } from "@/app/components/votes-list/votes-list.component";
-import type { ProposalVotes } from "@/app/graphql";
 import classNames from "classnames";
+import { Card, TabList } from "@/components/_shared";
+import { VotesList } from "@/components/votes-list/votes-list.component";
+import type { ProposalVotes } from "@/lib/graphql";
 import styles from "../page.module.scss";
 
 type Props = {
diff --git a/app/(routes)/proposals/[id]/_components/vote.component.tsx b/src/app/(routes)/proposals/[id]/_components/vote.component.tsx
similarity index 50%
rename from app/(routes)/proposals/[id]/_components/vote.component.tsx
rename to src/app/(routes)/proposals/[id]/_components/vote.component.tsx
index 10d6a79e..439fd000 100644
--- a/app/(routes)/proposals/[id]/_components/vote.component.tsx
+++ b/src/app/(routes)/proposals/[id]/_components/vote.component.tsx
@@ -1,7 +1,7 @@
-import LoadingState from "@/app/components/_shared/vote-loading-state/vote-loading-state";
-import CastVote from "@/app/components/vote-cast-vote/cast-vote";
-import InactiveProposalStatusMessage from "@/app/components/vote-inactive-proposal-status-message/inactive-proposal-status-message";
-import { Proposal, ProposalState } from "@/app/graphql";
+import LoadingState from "@/components/_shared/vote-loading-state/vote-loading-state";
+import CastVote from "@/components/vote-cast-vote/cast-vote";
+import InactiveProposalStatusMessage from "@/components/vote-inactive-proposal-status-message/inactive-proposal-status-message";
+import { Proposal, ProposalState } from "@/lib/graphql";
 
 export default function Vote({ proposal }: { proposal: Proposal }) {
   if (proposal && proposal.state === ProposalState.NoState) {
diff --git a/app/(routes)/proposals/[id]/page.module.scss b/src/app/(routes)/proposals/[id]/page.module.scss
similarity index 99%
rename from app/(routes)/proposals/[id]/page.module.scss
rename to src/app/(routes)/proposals/[id]/page.module.scss
index 70041062..d284c831 100644
--- a/app/(routes)/proposals/[id]/page.module.scss
+++ b/src/app/(routes)/proposals/[id]/page.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .addon {
   font-size: 16px;
diff --git a/app/(routes)/proposals/[id]/page.tsx b/src/app/(routes)/proposals/[id]/page.tsx
similarity index 87%
rename from app/(routes)/proposals/[id]/page.tsx
rename to src/app/(routes)/proposals/[id]/page.tsx
index 85a57036..653ce5e6 100644
--- a/app/(routes)/proposals/[id]/page.tsx
+++ b/src/app/(routes)/proposals/[id]/page.tsx
@@ -1,24 +1,28 @@
 "use client";
-import { GetProposal, Proposal, ProposalState } from "@/app/graphql";
-import { useProposalStates } from "@/app/hooks/useProposalStates";
+import { useMemo } from "react";
+import { celoAlfajores } from "viem/chains";
+import { useBlock, useBlockNumber } from "wagmi";
 import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
 import classNames from "classnames";
 import { format } from "date-fns";
-import { useMemo } from "react";
-import { useBlock, useBlockNumber, useChainId } from "wagmi";
+import { GetProposal, Proposal, ProposalState } from "@/lib/graphql";
 import styles from "./page.module.scss";
 
 // Components
-import BlockExplorerLink from "@/app/components/_shared/block-explorer-link/block-explorer-link.component";
-import { MarkdownView } from "@/app/components/_shared/markdown-view/markdown-view.component";
-import { Countdown } from "@/app/components/countdown/countdown.component";
-import { Avatar, Status, WalletAddressWithCopy } from "@components/_shared";
-import { ProposalCurrentVotes } from "@components/proposal-current-votes/proposal-current-votes.component";
-import { stateToStatusColorMap } from "@interfaces/proposal.interface";
 import ExecutionCode from "./_components/execution-code.component";
 import Participants from "./_components/participants.component";
 import Vote from "./_components/vote.component";
-import { celoAlfajores } from "viem/chains";
+import { useProposalStates } from "@/lib/contracts/governor/useProposalStates";
+import {
+  Avatar,
+  MarkdownView,
+  Status,
+  WalletAddressWithCopy,
+} from "@/components/_shared";
+import { stateToStatusColorMap } from "@/lib/interfaces/proposal.interface";
+import { Countdown } from "@/components/countdown/countdown.component";
+import BlockExplorerLink from "@/components/_shared/block-explorer-link/block-explorer-link.component";
+import { ProposalCurrentVotes } from "@/components/proposal-current-votes/proposal-current-votes.component";
 
 const Page = ({ params }: { params: { id: string } }) => {
   /**
diff --git a/app/(routes)/providers.tsx b/src/app/(routes)/providers.tsx
similarity index 68%
rename from app/(routes)/providers.tsx
rename to src/app/(routes)/providers.tsx
index 9a976ab2..dce868c3 100644
--- a/app/(routes)/providers.tsx
+++ b/src/app/(routes)/providers.tsx
@@ -1,12 +1,11 @@
+import { ReactNode, useEffect, useState } from "react";
 import { WagmiProvider } from "wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
-import { ReactNode, useEffect, useState } from "react";
 import { ApolloNextAppProvider } from "@apollo/experimental-nextjs-app-support/ssr";
-import { newApolloClient } from "@/app/graphql/apollo.client";
-import { wagmiConfig } from "@/app/helpers/wagmi.config";
-import { ChainStateProvider } from "../providers/chainState.provider";
-import { Celo } from "../helpers/chains";
+import { makeClient } from "@/lib/graphql/apollo.client";
+import { wagmiConfig } from "@/config/wagmi.config";
+import { Celo } from "@/config/chains";
 
 const queryClient = new QueryClient();
 
@@ -14,11 +13,11 @@ export function Providers({ children }: { children: ReactNode }) {
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
   return (
-    <ApolloNextAppProvider makeClient={newApolloClient}>
+    <ApolloNextAppProvider makeClient={makeClient}>
       <WagmiProvider config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
           <RainbowKitProvider initialChain={Celo}>
-            <ChainStateProvider>{mounted && children}</ChainStateProvider>
+            {mounted && children}
           </RainbowKitProvider>
         </QueryClientProvider>
       </WagmiProvider>
diff --git a/src/app/api/graphql/proposals/[id]/votes/[type]/route.ts b/src/app/api/graphql/proposals/[id]/votes/[type]/route.ts
new file mode 100644
index 00000000..f01dc4c4
--- /dev/null
+++ b/src/app/api/graphql/proposals/[id]/votes/[type]/route.ts
@@ -0,0 +1,11 @@
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string; type: string } },
+) {
+  const id = params.id;
+  const type = params.type;
+
+  return new Response(`ID: ${id}, type: ${type}`, {
+    status: 200,
+  });
+}
diff --git a/src/app/api/graphql/proposals/[id]/votes/route.ts b/src/app/api/graphql/proposals/[id]/votes/route.ts
new file mode 100644
index 00000000..6813aa2c
--- /dev/null
+++ b/src/app/api/graphql/proposals/[id]/votes/route.ts
@@ -0,0 +1,10 @@
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } },
+) {
+  const id = params.id;
+
+  return new Response(`ID: ${id}`, {
+    status: 200,
+  });
+}
diff --git a/src/app/api/graphql/route.ts b/src/app/api/graphql/route.ts
new file mode 100644
index 00000000..44536603
--- /dev/null
+++ b/src/app/api/graphql/route.ts
@@ -0,0 +1,28 @@
+import { startServerAndCreateNextHandler } from "@as-integrations/next";
+import { ApolloServer } from "@apollo/server";
+import { NextRequest } from "next/server";
+import { gql } from "graphql-tag";
+
+const typeDefs = gql`
+  type Query {
+    hello: String
+  }
+`;
+
+const resolvers = {
+  Query: {
+    hello: () => "Hello world!",
+  },
+};
+
+const server = new ApolloServer({
+  typeDefs,
+  resolvers,
+});
+
+// Typescript: req has the type NextRequest
+const handler = startServerAndCreateNextHandler<NextRequest>(server, {
+  context: async (req) => ({ req }),
+});
+
+export { handler as GET, handler as POST };
diff --git a/app/components/_icons/celo-logo.icon.tsx b/src/components/_icons/celo-logo.icon.tsx
similarity index 91%
rename from app/components/_icons/celo-logo.icon.tsx
rename to src/components/_icons/celo-logo.icon.tsx
index c724f6f6..1cafdeb1 100644
--- a/app/components/_icons/celo-logo.icon.tsx
+++ b/src/components/_icons/celo-logo.icon.tsx
@@ -1,5 +1,5 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const CeloLogoIcon = ({
   width = 23,
diff --git a/app/components/_icons/chevron.icon.tsx b/src/components/_icons/chevron.icon.tsx
similarity index 92%
rename from app/components/_icons/chevron.icon.tsx
rename to src/components/_icons/chevron.icon.tsx
index a2f18d10..36094854 100644
--- a/app/components/_icons/chevron.icon.tsx
+++ b/src/components/_icons/chevron.icon.tsx
@@ -1,6 +1,6 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
 import classNames from "classnames";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 interface ChevronIconProps extends BaseIconProps {
   direction?: "up" | "down" | "left" | "right";
diff --git a/app/components/_icons/copy.icon.tsx b/src/components/_icons/copy.icon.tsx
similarity index 84%
rename from app/components/_icons/copy.icon.tsx
rename to src/components/_icons/copy.icon.tsx
index 21c0b023..8845af08 100644
--- a/app/components/_icons/copy.icon.tsx
+++ b/src/components/_icons/copy.icon.tsx
@@ -1,5 +1,5 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const CopyIcon = ({
   width = 24,
diff --git a/app/components/_icons/dark-mode.icon.tsx b/src/components/_icons/dark-mode.icon.tsx
similarity index 86%
rename from app/components/_icons/dark-mode.icon.tsx
rename to src/components/_icons/dark-mode.icon.tsx
index 75f53570..a0e46a52 100644
--- a/app/components/_icons/dark-mode.icon.tsx
+++ b/src/components/_icons/dark-mode.icon.tsx
@@ -1,5 +1,5 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const DarkModeIcon = ({
   width = 13,
diff --git a/app/components/_icons/discord.icon.tsx b/src/components/_icons/discord.icon.tsx
similarity index 96%
rename from app/components/_icons/discord.icon.tsx
rename to src/components/_icons/discord.icon.tsx
index 84c8d78b..04e71636 100644
--- a/app/components/_icons/discord.icon.tsx
+++ b/src/components/_icons/discord.icon.tsx
@@ -1,6 +1,6 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
 import classNames from "classnames";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const DiscordIcon = ({
   width = 20,
diff --git a/app/components/_icons/github.icon.tsx b/src/components/_icons/github.icon.tsx
similarity index 92%
rename from app/components/_icons/github.icon.tsx
rename to src/components/_icons/github.icon.tsx
index a92fd259..bd2c6005 100644
--- a/app/components/_icons/github.icon.tsx
+++ b/src/components/_icons/github.icon.tsx
@@ -1,6 +1,6 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
 import classNames from "classnames";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const GithubIcon = ({
   width = 20,
diff --git a/app/components/_icons/index.tsx b/src/components/_icons/index.tsx
similarity index 100%
rename from app/components/_icons/index.tsx
rename to src/components/_icons/index.tsx
diff --git a/app/components/_icons/learn-more.icon.tsx b/src/components/_icons/learn-more.icon.tsx
similarity index 99%
rename from app/components/_icons/learn-more.icon.tsx
rename to src/components/_icons/learn-more.icon.tsx
index 591996b4..44fc043c 100644
--- a/app/components/_icons/learn-more.icon.tsx
+++ b/src/components/_icons/learn-more.icon.tsx
@@ -1,4 +1,4 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
 
 export const LearnMoreIcon = ({ width = 397, height = 315 }: BaseIconProps) => {
   return (
diff --git a/app/components/_icons/light-mode.icon.tsx b/src/components/_icons/light-mode.icon.tsx
similarity index 90%
rename from app/components/_icons/light-mode.icon.tsx
rename to src/components/_icons/light-mode.icon.tsx
index 2430e9c7..12425d3a 100644
--- a/app/components/_icons/light-mode.icon.tsx
+++ b/src/components/_icons/light-mode.icon.tsx
@@ -1,5 +1,5 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const LightModeIcon = ({
   width = 13,
diff --git a/app/components/_icons/mento-logo.icon.tsx b/src/components/_icons/mento-logo.icon.tsx
similarity index 95%
rename from app/components/_icons/mento-logo.icon.tsx
rename to src/components/_icons/mento-logo.icon.tsx
index 944b73fe..ae268206 100644
--- a/app/components/_icons/mento-logo.icon.tsx
+++ b/src/components/_icons/mento-logo.icon.tsx
@@ -1,6 +1,6 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
 import classNames from "classnames";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const MentoLogoIcon = ({
   width = 100,
diff --git a/app/components/_icons/mento-text-logo.icon.tsx b/src/components/_icons/mento-text-logo.icon.tsx
similarity index 99%
rename from app/components/_icons/mento-text-logo.icon.tsx
rename to src/components/_icons/mento-text-logo.icon.tsx
index 6ac036b3..99097fd5 100644
--- a/app/components/_icons/mento-text-logo.icon.tsx
+++ b/src/components/_icons/mento-text-logo.icon.tsx
@@ -1,6 +1,6 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
 import classNames from "classnames";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const MentoTextLogoIcon = ({
   width = 554,
diff --git a/app/components/_icons/mento.icon.tsx b/src/components/_icons/mento.icon.tsx
similarity index 93%
rename from app/components/_icons/mento.icon.tsx
rename to src/components/_icons/mento.icon.tsx
index 5d3cecb6..8aebc98e 100644
--- a/app/components/_icons/mento.icon.tsx
+++ b/src/components/_icons/mento.icon.tsx
@@ -1,4 +1,4 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
 
 export const MentoIcon = ({
   width = 60,
diff --git a/app/components/_icons/success-icon.tsx b/src/components/_icons/success-icon.tsx
similarity index 100%
rename from app/components/_icons/success-icon.tsx
rename to src/components/_icons/success-icon.tsx
diff --git a/app/components/_icons/twitter.icon.tsx b/src/components/_icons/twitter.icon.tsx
similarity index 88%
rename from app/components/_icons/twitter.icon.tsx
rename to src/components/_icons/twitter.icon.tsx
index 47e23fe8..3e2e75fa 100644
--- a/app/components/_icons/twitter.icon.tsx
+++ b/src/components/_icons/twitter.icon.tsx
@@ -1,6 +1,6 @@
-import BaseIconProps from "@interfaces/base-icon-props.interface";
-import exports from "@styles/exports.module.scss";
 import classNames from "classnames";
+import BaseIconProps from "@/interfaces/base-icon-props.interface";
+import exports from "@/styles/exports.module.scss";
 
 export const TwitterIcon = ({
   width = 41,
diff --git a/app/components/_shared/avatar/avatar.component.tsx b/src/components/_shared/avatar/avatar.component.tsx
similarity index 83%
rename from app/components/_shared/avatar/avatar.component.tsx
rename to src/components/_shared/avatar/avatar.component.tsx
index e53b5cea..3942385b 100644
--- a/app/components/_shared/avatar/avatar.component.tsx
+++ b/src/components/_shared/avatar/avatar.component.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import classNames from "classnames";
 import { create } from "ethereum-blockies";
-import BlockExplorerLink from "../block-explorer-link/block-explorer-link.component";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import BlockExplorerLink from "@/components/_shared/block-explorer-link/block-explorer-link.component";
 import styles from "./avatar.module.scss";
 
 interface AvatarProps extends BaseComponentProps {
diff --git a/app/components/_shared/avatar/avatar.module.scss b/src/components/_shared/avatar/avatar.module.scss
similarity index 86%
rename from app/components/_shared/avatar/avatar.module.scss
rename to src/components/_shared/avatar/avatar.module.scss
index a7e960c9..06d76fb9 100644
--- a/app/components/_shared/avatar/avatar.module.scss
+++ b/src/components/_shared/avatar/avatar.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .avatar {
   height: 35px;
diff --git a/app/components/_shared/badge/badge.component.tsx b/src/components/_shared/badge/badge.component.tsx
similarity index 83%
rename from app/components/_shared/badge/badge.component.tsx
rename to src/components/_shared/badge/badge.component.tsx
index 42f42b6a..8cd181c6 100644
--- a/app/components/_shared/badge/badge.component.tsx
+++ b/src/components/_shared/badge/badge.component.tsx
@@ -1,8 +1,9 @@
+import { ReactNode } from "react";
 import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import { BadgeType } from "@/lib/types";
 import styles from "./badge.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import { BadgeType } from "@/app/types";
-import { ReactNode } from "react";
+
 interface BadgeProps extends BaseComponentProps {
   children: ReactNode;
   type: BadgeType;
diff --git a/app/components/_shared/badge/badge.module.scss b/src/components/_shared/badge/badge.module.scss
similarity index 96%
rename from app/components/_shared/badge/badge.module.scss
rename to src/components/_shared/badge/badge.module.scss
index 045236af..0c27117c 100644
--- a/app/components/_shared/badge/badge.module.scss
+++ b/src/components/_shared/badge/badge.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 @mixin branded-badge($border-color, $background-color, $foreground-color) {
   border: 1px solid $border-color;
diff --git a/app/components/_shared/block-explorer-link/block-explorer-link.component.tsx b/src/components/_shared/block-explorer-link/block-explorer-link.component.tsx
similarity index 100%
rename from app/components/_shared/block-explorer-link/block-explorer-link.component.tsx
rename to src/components/_shared/block-explorer-link/block-explorer-link.component.tsx
diff --git a/app/components/_shared/block-explorer-link/block-explorer-link.module.scss b/src/components/_shared/block-explorer-link/block-explorer-link.module.scss
similarity index 100%
rename from app/components/_shared/block-explorer-link/block-explorer-link.module.scss
rename to src/components/_shared/block-explorer-link/block-explorer-link.module.scss
diff --git a/app/components/_shared/breadcrumbs/breadcrumbs.component.tsx b/src/components/_shared/breadcrumbs/breadcrumbs.component.tsx
similarity index 96%
rename from app/components/_shared/breadcrumbs/breadcrumbs.component.tsx
rename to src/components/_shared/breadcrumbs/breadcrumbs.component.tsx
index 9be0f22e..ec6f221c 100644
--- a/app/components/_shared/breadcrumbs/breadcrumbs.component.tsx
+++ b/src/components/_shared/breadcrumbs/breadcrumbs.component.tsx
@@ -1,9 +1,9 @@
 "use client";
-import { routingMap } from "@/app/helpers/routing.map";
-import { useParams, usePathname } from "next/navigation";
 import { useMemo } from "react";
 import Link from "next/link";
 import styles from "./breadcrumbs.module.scss";
+import { routingMap } from "@/lib/helpers/routing.map";
+import { useParams, usePathname } from "next/navigation";
 
 type CrumbProps = {
   path: string;
diff --git a/app/components/_shared/breadcrumbs/breadcrumbs.module.scss b/src/components/_shared/breadcrumbs/breadcrumbs.module.scss
similarity index 93%
rename from app/components/_shared/breadcrumbs/breadcrumbs.module.scss
rename to src/components/_shared/breadcrumbs/breadcrumbs.module.scss
index 6e07fff2..3fbea0f2 100644
--- a/app/components/_shared/breadcrumbs/breadcrumbs.module.scss
+++ b/src/components/_shared/breadcrumbs/breadcrumbs.module.scss
@@ -1,4 +1,4 @@
-@import '@/app/brand';
+@import '@/styles/brand';
 
 .container {
   width: 100%;
diff --git a/app/components/_shared/button/button.component.tsx b/src/components/_shared/button/button.component.tsx
similarity index 94%
rename from app/components/_shared/button/button.component.tsx
rename to src/components/_shared/button/button.component.tsx
index 9169d9a0..77d84617 100644
--- a/app/components/_shared/button/button.component.tsx
+++ b/src/components/_shared/button/button.component.tsx
@@ -1,9 +1,9 @@
-import styles from "./button.module.scss";
+import { ReactNode } from "react";
 import classNames from "classnames";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import Link from "next/link";
-import { ReactNode } from "react";
-import { ButtonType } from "@/app/types";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import { ButtonType } from "@/lib/types";
+import styles from "./button.module.scss";
 
 interface ButtonProps extends BaseComponentProps {
   theme?: ButtonType;
diff --git a/app/components/_shared/button/button.module.scss b/src/components/_shared/button/button.module.scss
similarity index 99%
rename from app/components/_shared/button/button.module.scss
rename to src/components/_shared/button/button.module.scss
index 9c223554..59275716 100644
--- a/app/components/_shared/button/button.module.scss
+++ b/src/components/_shared/button/button.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 @keyframes button-click-animation {
   0% {
diff --git a/app/components/_shared/card/card.component.tsx b/src/components/_shared/card/card.component.tsx
similarity index 93%
rename from app/components/_shared/card/card.component.tsx
rename to src/components/_shared/card/card.component.tsx
index 0e293758..7b8fae28 100644
--- a/app/components/_shared/card/card.component.tsx
+++ b/src/components/_shared/card/card.component.tsx
@@ -1,7 +1,7 @@
-import styles from "./card.module.scss";
-import classNames from "classnames";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import { ReactNode } from "react";
+import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import styles from "./card.module.scss";
 
 interface CardPartialProps extends BaseComponentProps {
   children: ReactNode;
diff --git a/app/components/_shared/card/card.module.scss b/src/components/_shared/card/card.module.scss
similarity index 97%
rename from app/components/_shared/card/card.module.scss
rename to src/components/_shared/card/card.module.scss
index ade093bc..9f96f465 100644
--- a/app/components/_shared/card/card.module.scss
+++ b/src/components/_shared/card/card.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .card {
   background-color: var(--theme-card-background);
diff --git a/app/components/_shared/connect-button/connect-button.component.tsx b/src/components/_shared/connect-button/connect-button.component.tsx
similarity index 67%
rename from app/components/_shared/connect-button/connect-button.component.tsx
rename to src/components/_shared/connect-button/connect-button.component.tsx
index 6d176fe6..1855df49 100644
--- a/app/components/_shared/connect-button/connect-button.component.tsx
+++ b/src/components/_shared/connect-button/connect-button.component.tsx
@@ -1,20 +1,19 @@
 "use client";
-import styles from "./connect-button.module.scss";
-import { Avatar, Button, DropdownButton } from "@components/_shared";
-import { ChevronIcon } from "@components/_icons";
-import WalletHelper from "@/app/helpers/wallet.helper";
 import {
   ConnectButton as RainbowConnectButton,
   useAccountModal,
   useChainModal,
 } from "@rainbow-me/rainbowkit";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import { ButtonType } from "@/app/types";
-import { useUserStore } from "@/app/store";
-import { useEffect } from "react";
-import { useChainState } from "@/app/providers/chainState.provider";
 import classNames from "classnames";
 import { formatUnits } from "viem";
+import { Avatar, Button, DropdownButton } from "@/components/_shared";
+import { ChevronIcon } from "@/components/_icons";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import WalletHelper from "@/lib/helpers/wallet.helper";
+import { ButtonType } from "@/lib/types";
+import styles from "./connect-button.module.scss";
+import useTokens from "@/lib/contracts/useTokens";
+import { useAccount } from "wagmi";
 
 interface ConnectedDropdownProps extends BaseComponentProps {
   block?: boolean;
@@ -32,22 +31,9 @@ export const ConnectedDropdown = ({
 }: ConnectedDropdownProps) => {
   const { openChainModal } = useChainModal();
   const { openAccountModal } = useAccountModal();
+  const { isConnected } = useAccount();
 
-  const { initWallet, disconnectWallet, isFetching, isInitialized } =
-    useUserStore();
-
-  useEffect(() => {
-    const connected = !!account && !!chain;
-    if (connected && !isInitialized && !isFetching) {
-      initWallet(account.address);
-    }
-    if (!connected && !isFetching && isInitialized) {
-      disconnectWallet();
-    }
-  }, [account, chain, isFetching, isInitialized, disconnectWallet, initWallet]);
-
-  const tokens = useChainState((s) => s.tokens);
-  const chainStateReady = useChainState((s) => s.ready);
+  const { mentoBalance, veMentoBalance } = useTokens();
 
   return (
     <DropdownButton
@@ -57,18 +43,18 @@ export const ConnectedDropdown = ({
       avatar={<Avatar address={account.address || ""} />}
     >
       <DropdownButton.Dropdown>
-        {chainStateReady ? (
+        {isConnected ? (
           <div className={styles.wallet_addons}>
             <div className={styles.addon}>
-              <div className={styles.addon__title}>{tokens.mento.symbol}</div>
+              <div className={styles.addon__title}>{mentoBalance.symbol}</div>
               <div className={styles.addon__value}>
-                {formatUnits(tokens.mento.balance, tokens.mento.decimals)}
+                {formatUnits(mentoBalance.value, mentoBalance.decimal)}
               </div>
             </div>
             <div className={styles.addon}>
-              <div className={styles.addon__title}>{tokens.veMento.symbol}</div>
+              <div className={styles.addon__title}>{veMentoBalance.symbol}</div>
               <div className={styles.addon__value}>
-                {formatUnits(tokens.veMento.balance, tokens.veMento.decimals)}
+                {formatUnits(veMentoBalance.value, veMentoBalance.decimal)}
               </div>
             </div>
           </div>
diff --git a/app/components/_shared/connect-button/connect-button.module.scss b/src/components/_shared/connect-button/connect-button.module.scss
similarity index 97%
rename from app/components/_shared/connect-button/connect-button.module.scss
rename to src/components/_shared/connect-button/connect-button.module.scss
index 555e88df..74938b21 100644
--- a/app/components/_shared/connect-button/connect-button.module.scss
+++ b/src/components/_shared/connect-button/connect-button.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .container {
   width: auto;
diff --git a/app/components/_shared/date-picker/date-picker.component.tsx b/src/components/_shared/date-picker/date-picker.component.tsx
similarity index 94%
rename from app/components/_shared/date-picker/date-picker.component.tsx
rename to src/components/_shared/date-picker/date-picker.component.tsx
index f16b7b61..bae3a5c9 100644
--- a/app/components/_shared/date-picker/date-picker.component.tsx
+++ b/src/components/_shared/date-picker/date-picker.component.tsx
@@ -1,13 +1,12 @@
 "use client";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { isBefore, addDays } from "date-fns";
+import classNames from "classnames";
+import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import useOutsideAlerter from "@/lib/hooks/useOutsideAlerter";
 import "react-day-picker/dist/style.css";
 import styles from "./date-picker.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
-import classNames from "classnames";
-import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import useOutsideAlerter from "@/app/hooks/useOutsideAlerter";
-import { format, isAfter, isBefore } from "date-fns";
-import addDays from "date-fns/addDays";
 
 type DisallowedDay =
   | "sun"
diff --git a/app/components/_shared/date-picker/date-picker.module.scss b/src/components/_shared/date-picker/date-picker.module.scss
similarity index 98%
rename from app/components/_shared/date-picker/date-picker.module.scss
rename to src/components/_shared/date-picker/date-picker.module.scss
index eb582e5c..89b4f12e 100644
--- a/app/components/_shared/date-picker/date-picker.module.scss
+++ b/src/components/_shared/date-picker/date-picker.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .datePicker {
   position: relative;
diff --git a/app/components/_shared/divider/divider.component.tsx b/src/components/_shared/divider/divider.component.tsx
similarity index 76%
rename from app/components/_shared/divider/divider.component.tsx
rename to src/components/_shared/divider/divider.component.tsx
index bddf03d4..36ec45a8 100644
--- a/app/components/_shared/divider/divider.component.tsx
+++ b/src/components/_shared/divider/divider.component.tsx
@@ -1,5 +1,5 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import styles from "./divider.module.scss";
 
 export const Divider = ({ className, style }: BaseComponentProps) => {
diff --git a/app/components/_shared/divider/divider.module.scss b/src/components/_shared/divider/divider.module.scss
similarity index 79%
rename from app/components/_shared/divider/divider.module.scss
rename to src/components/_shared/divider/divider.module.scss
index b0c99764..b6c68d07 100644
--- a/app/components/_shared/divider/divider.module.scss
+++ b/src/components/_shared/divider/divider.module.scss
@@ -1,4 +1,4 @@
-@import '@/app/brand';
+@import '@/styles/brand';
 
 .divider {
     border-bottom: 1px solid $c-grey;
diff --git a/app/components/_shared/dropdown-button/dropdown-button.addons.tsx b/src/components/_shared/dropdown-button/dropdown-button.addons.tsx
similarity index 74%
rename from app/components/_shared/dropdown-button/dropdown-button.addons.tsx
rename to src/components/_shared/dropdown-button/dropdown-button.addons.tsx
index 03344e28..25487e12 100644
--- a/app/components/_shared/dropdown-button/dropdown-button.addons.tsx
+++ b/src/components/_shared/dropdown-button/dropdown-button.addons.tsx
@@ -1,7 +1,6 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import classNames from "classnames";
-import styles from "@components/_shared/dropdown-button/dropdown-button.module.scss";
-import { Button } from "@components/_shared";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import styles from "@/components/_shared/dropdown-button/dropdown-button.module.scss";
 
 export const Dropdown = ({
   children,
diff --git a/app/components/_shared/dropdown-button/dropdown-button.component.tsx b/src/components/_shared/dropdown-button/dropdown-button.component.tsx
similarity index 88%
rename from app/components/_shared/dropdown-button/dropdown-button.component.tsx
rename to src/components/_shared/dropdown-button/dropdown-button.component.tsx
index 59fc08c8..6e3a4e04 100644
--- a/app/components/_shared/dropdown-button/dropdown-button.component.tsx
+++ b/src/components/_shared/dropdown-button/dropdown-button.component.tsx
@@ -1,16 +1,16 @@
 "use client";
-import styles from "./dropdown-button.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import { ButtonType } from "@/app/types";
-import { Button } from "@components/_shared";
 import { useEffect, useRef, useState } from "react";
-import useOutsideAlerter from "@/app/hooks/useOutsideAlerter";
 import classNames from "classnames";
-import { ChevronIcon } from "@components/_icons";
+import useOutsideAlerter from "@/lib/hooks/useOutsideAlerter";
+import { ButtonType } from "@/lib/types";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import { Button } from "@/components/_shared";
+import { ChevronIcon } from "@/components/_icons";
 import {
   Dropdown,
   DropdownElement,
-} from "@components/_shared/dropdown-button/dropdown-button.addons";
+} from "@/components/_shared/dropdown-button/dropdown-button.addons";
+import styles from "./dropdown-button.module.scss";
 
 interface DropdownButtonProps extends BaseComponentProps {
   theme?: ButtonType;
@@ -105,7 +105,7 @@ export const DropdownButton = ({
       <div
         ref={dropdownContentRef}
         style={{
-          top: !!dropdownPositionTopOffset
+          top: dropdownPositionTopOffset
             ? `-${dropdownPositionTopOffset}px`
             : "",
         }}
diff --git a/app/components/_shared/dropdown-button/dropdown-button.module.scss b/src/components/_shared/dropdown-button/dropdown-button.module.scss
similarity index 99%
rename from app/components/_shared/dropdown-button/dropdown-button.module.scss
rename to src/components/_shared/dropdown-button/dropdown-button.module.scss
index 5b4f20ad..66b9f7d0 100644
--- a/app/components/_shared/dropdown-button/dropdown-button.module.scss
+++ b/src/components/_shared/dropdown-button/dropdown-button.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 @mixin branded-dropdown($border-color, $background-color, $foreground-color) {
   .dropdown {
diff --git a/app/components/_shared/execution-code-view/execution-code-view.component.tsx b/src/components/_shared/execution-code-view/execution-code-view.component.tsx
similarity index 93%
rename from app/components/_shared/execution-code-view/execution-code-view.component.tsx
rename to src/components/_shared/execution-code-view/execution-code-view.component.tsx
index 9066d9fe..9f9d9ec4 100644
--- a/app/components/_shared/execution-code-view/execution-code-view.component.tsx
+++ b/src/components/_shared/execution-code-view/execution-code-view.component.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { SeeAll } from "..";
+import { SeeAll } from "@/components/_shared";
 import styles from "./execution-code-view.module.scss";
 
 interface ExecutionCodeViewProps {
diff --git a/app/components/_shared/execution-code-view/execution-code-view.module.scss b/src/components/_shared/execution-code-view/execution-code-view.module.scss
similarity index 88%
rename from app/components/_shared/execution-code-view/execution-code-view.module.scss
rename to src/components/_shared/execution-code-view/execution-code-view.module.scss
index 54da9b96..77961c34 100644
--- a/app/components/_shared/execution-code-view/execution-code-view.module.scss
+++ b/src/components/_shared/execution-code-view/execution-code-view.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .container {
   .form_data_title {
diff --git a/app/components/_shared/expandable/expandable.component.tsx b/src/components/_shared/expandable/expandable.component.tsx
similarity index 82%
rename from app/components/_shared/expandable/expandable.component.tsx
rename to src/components/_shared/expandable/expandable.component.tsx
index 6ea903a2..272aa3e5 100644
--- a/app/components/_shared/expandable/expandable.component.tsx
+++ b/src/components/_shared/expandable/expandable.component.tsx
@@ -1,10 +1,9 @@
 "use client";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import styles from "./expandable.module.scss";
+import { ReactNode, useState } from "react";
 import classNames from "classnames";
-import { ChevronIcon } from "@components/_icons";
-import { useState } from "react";
-import { ReactNode } from "react";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import { ChevronIcon } from "@/components/_icons";
+import styles from "./expandable.module.scss";
 
 interface ExpandableProps extends BaseComponentProps {
   header: ReactNode | string;
diff --git a/app/components/_shared/expandable/expandable.module.scss b/src/components/_shared/expandable/expandable.module.scss
similarity index 94%
rename from app/components/_shared/expandable/expandable.module.scss
rename to src/components/_shared/expandable/expandable.module.scss
index a838273e..14f20056 100644
--- a/app/components/_shared/expandable/expandable.module.scss
+++ b/src/components/_shared/expandable/expandable.module.scss
@@ -1,4 +1,4 @@
-@import '@/app/brand';
+@import '@/styles/brand';
 
 .expandable {
 
diff --git a/app/components/_shared/footer/footer.component.tsx b/src/components/_shared/footer/footer.component.tsx
similarity index 92%
rename from app/components/_shared/footer/footer.component.tsx
rename to src/components/_shared/footer/footer.component.tsx
index c2fcfcbb..14221e61 100644
--- a/app/components/_shared/footer/footer.component.tsx
+++ b/src/components/_shared/footer/footer.component.tsx
@@ -1,6 +1,6 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import styles from "./footer.module.scss";
 import classNames from "classnames";
+import { usePathname } from "next/navigation";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import {
   ChevronIcon,
   DiscordIcon,
@@ -8,12 +8,12 @@ import {
   MentoLogoIcon,
   TwitterIcon,
   LearnMoreIcon,
-} from "@components/_icons";
+} from "@/components/_icons";
 import Link from "next/link";
-import { Button } from "@components/_shared";
-import exports from "@styles/exports.module.scss";
-import { usePathname } from "next/navigation";
-import { ThemeSwitch } from "../../theme-switch/theme-switch.component";
+import { Button } from "@/components/_shared";
+import exports from "@/styles/exports.module.scss";
+import { ThemeSwitch } from "@/components/theme-switch/theme-switch.component";
+import styles from "./footer.module.scss";
 
 interface FooterProps extends BaseComponentProps {}
 
diff --git a/app/components/_shared/footer/footer.module.scss b/src/components/_shared/footer/footer.module.scss
similarity index 98%
rename from app/components/_shared/footer/footer.module.scss
rename to src/components/_shared/footer/footer.module.scss
index 2862fbda..956f3155 100644
--- a/app/components/_shared/footer/footer.module.scss
+++ b/src/components/_shared/footer/footer.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .footer {
   margin: 75px 0 112px;
diff --git a/app/components/_shared/header/header.component.tsx b/src/components/_shared/header/header.component.tsx
similarity index 92%
rename from app/components/_shared/header/header.component.tsx
rename to src/components/_shared/header/header.component.tsx
index 70720ebf..8fa2a68b 100644
--- a/app/components/_shared/header/header.component.tsx
+++ b/src/components/_shared/header/header.component.tsx
@@ -1,11 +1,11 @@
 "use client";
-import useOutsideAlerter from "@/app/hooks/useOutsideAlerter";
-import { ChevronIcon, MentoLogoIcon } from "@components/_icons";
-import { Button, ConnectButton } from "@components/_shared";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
+import { useRef, useState } from "react";
 import classNames from "classnames";
 import Link from "next/link";
-import { useRef, useState } from "react";
+import useOutsideAlerter from "@/lib/hooks/useOutsideAlerter";
+import { ChevronIcon, MentoLogoIcon } from "@/components/_icons";
+import { Button, ConnectButton } from "@/components/_shared";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import styles from "./header.module.scss";
 
 interface HeaderProps extends BaseComponentProps {}
diff --git a/app/components/_shared/header/header.module.scss b/src/components/_shared/header/header.module.scss
similarity index 99%
rename from app/components/_shared/header/header.module.scss
rename to src/components/_shared/header/header.module.scss
index a3f91702..fd3e58ab 100644
--- a/app/components/_shared/header/header.module.scss
+++ b/src/components/_shared/header/header.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .header {
   z-index: 51;
diff --git a/app/components/_shared/index.tsx b/src/components/_shared/index.tsx
similarity index 100%
rename from app/components/_shared/index.tsx
rename to src/components/_shared/index.tsx
diff --git a/app/components/_shared/input/input.component.tsx b/src/components/_shared/input/input.component.tsx
similarity index 87%
rename from app/components/_shared/input/input.component.tsx
rename to src/components/_shared/input/input.component.tsx
index b4955733..da082f16 100644
--- a/app/components/_shared/input/input.component.tsx
+++ b/src/components/_shared/input/input.component.tsx
@@ -1,8 +1,8 @@
-import styles from "./input.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import classNames from "classnames";
 import { ReactNode } from "react";
-import BaseInputProps from "@interfaces/base-input-props.interface";
+import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import BaseInputProps from "@/interfaces/base-input-props.interface";
+import styles from "./input.module.scss";
 
 interface InputProps extends BaseComponentProps, BaseInputProps {
   type: "text" | "email" | "password" | "number" | "tel" | "url";
diff --git a/app/components/_shared/input/input.module.scss b/src/components/_shared/input/input.module.scss
similarity index 93%
rename from app/components/_shared/input/input.module.scss
rename to src/components/_shared/input/input.module.scss
index d90850fc..3bcac482 100644
--- a/app/components/_shared/input/input.module.scss
+++ b/src/components/_shared/input/input.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .wrapper {
   margin-top: $theme-unit;
diff --git a/app/components/_shared/loader/loader.component.tsx b/src/components/_shared/loader/loader.component.tsx
similarity index 91%
rename from app/components/_shared/loader/loader.component.tsx
rename to src/components/_shared/loader/loader.component.tsx
index dd5f04db..486c0fa6 100644
--- a/app/components/_shared/loader/loader.component.tsx
+++ b/src/components/_shared/loader/loader.component.tsx
@@ -1,6 +1,6 @@
-import { MentoIcon } from "@components/_icons";
-import styles from "./loader.module.scss";
 import classNames from "classnames";
+import { MentoIcon } from "@/components/_icons";
+import styles from "./loader.module.scss";
 
 export const Loader = ({
   isCenter,
diff --git a/app/components/_shared/loader/loader.module.scss b/src/components/_shared/loader/loader.module.scss
similarity index 97%
rename from app/components/_shared/loader/loader.module.scss
rename to src/components/_shared/loader/loader.module.scss
index 8763309e..236366ab 100644
--- a/app/components/_shared/loader/loader.module.scss
+++ b/src/components/_shared/loader/loader.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .loader {
   width: $theme-unit * 12;
diff --git a/app/components/_shared/markdown-editor/markdown-editor.component.tsx b/src/components/_shared/markdown-editor/markdown-editor.component.tsx
similarity index 96%
rename from app/components/_shared/markdown-editor/markdown-editor.component.tsx
rename to src/components/_shared/markdown-editor/markdown-editor.component.tsx
index 24bb7654..d3558df1 100644
--- a/app/components/_shared/markdown-editor/markdown-editor.component.tsx
+++ b/src/components/_shared/markdown-editor/markdown-editor.component.tsx
@@ -1,4 +1,5 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
+import classNames from "classnames";
+import { useEffect, useRef, useState } from "react";
 import {
   BlockTypeSelect,
   BoldItalicUnderlineToggles,
@@ -25,14 +26,15 @@ import {
   toolbarPlugin,
 } from "@mdxeditor/editor";
 import "@mdxeditor/editor/style.css";
-import classNames from "classnames";
-import { useEffect, useRef, useState } from "react";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import { MarkdownView } from "@/components/_shared";
 import styles from "./markdown-editor.module.scss";
-import { MarkdownView } from "..";
+
 interface MarkdownEditorProps extends BaseComponentProps {
   value: string;
   markdownChanged: (value: string) => void;
 }
+
 export const MarkdownEditor = ({
   className,
   style,
diff --git a/app/components/_shared/markdown-editor/markdown-editor.module.scss b/src/components/_shared/markdown-editor/markdown-editor.module.scss
similarity index 95%
rename from app/components/_shared/markdown-editor/markdown-editor.module.scss
rename to src/components/_shared/markdown-editor/markdown-editor.module.scss
index cc3a80dd..f5a830ec 100644
--- a/app/components/_shared/markdown-editor/markdown-editor.module.scss
+++ b/src/components/_shared/markdown-editor/markdown-editor.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .editor {
   height: 100%;
diff --git a/app/components/_shared/markdown-view/markdown-view.component.tsx b/src/components/_shared/markdown-view/markdown-view.component.tsx
similarity index 100%
rename from app/components/_shared/markdown-view/markdown-view.component.tsx
rename to src/components/_shared/markdown-view/markdown-view.component.tsx
index 6491c9f3..560e4c3a 100644
--- a/app/components/_shared/markdown-view/markdown-view.component.tsx
+++ b/src/components/_shared/markdown-view/markdown-view.component.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { remark } from "remark";
 import html from "remark-html";
-import styles from "./markdown-view.module.scss";
 import classNames from "classnames";
+import styles from "./markdown-view.module.scss";
 
 type MarkdownViewProps = {
   markdown: string;
diff --git a/app/components/_shared/markdown-view/markdown-view.module.scss b/src/components/_shared/markdown-view/markdown-view.module.scss
similarity index 91%
rename from app/components/_shared/markdown-view/markdown-view.module.scss
rename to src/components/_shared/markdown-view/markdown-view.module.scss
index 183edd8b..4f70fe0a 100644
--- a/app/components/_shared/markdown-view/markdown-view.module.scss
+++ b/src/components/_shared/markdown-view/markdown-view.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .container {
   color: var(--theme-foreground-color);
diff --git a/app/components/_shared/mento-lock/mento-lock.component.tsx b/src/components/_shared/mento-lock/mento-lock.component.tsx
similarity index 74%
rename from app/components/_shared/mento-lock/mento-lock.component.tsx
rename to src/components/_shared/mento-lock/mento-lock.component.tsx
index f102a1b3..03ac0373 100644
--- a/app/components/_shared/mento-lock/mento-lock.component.tsx
+++ b/src/components/_shared/mento-lock/mento-lock.component.tsx
@@ -1,5 +1,9 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import { Button, DatePicker, Input, Slider } from "@components/_shared";
+import { useCallback, useEffect, useMemo } from "react";
+import { date, number, object, setLocale } from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import { Button, DatePicker, Input, Slider } from "@/components/_shared";
 import {
   addMonths,
   addYears,
@@ -8,38 +12,26 @@ import {
   nextWednesday,
   setISODay,
 } from "date-fns";
-import { date, InferType, number, object, setLocale } from "yup";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { useUserStore } from "@/app/store";
-import { useEffect } from "react";
-import { ILock } from "@interfaces/lock.interface";
-import useModal from "@/app/providers/modal.provider";
+import useModal from "@/lib/providers/modal.provider";
+import { formatUnits } from "viem";
+import useTokens from "@/lib/contracts/useTokens";
+import { useAccount } from "wagmi";
+import useLockMento from "@/lib/contracts/locking/useLockMento";
 
 interface MentoLockProps extends BaseComponentProps {}
 
-let validationSchema = object({
-  toLock: number().required().typeError("Invalid number").max(0),
-  expiration: date()
-    .required()
-    .typeError("Invalid Date")
-    .min(addYears(new Date(), 1))
-    .max(addYears(new Date(), 4)),
-  expirationMonths: number()
-    .required()
-    .typeError("Invalid number")
-    .max(4 * 52),
-});
-
-type FormData = InferType<typeof validationSchema>;
-
 export const MentoLock = ({ className, style }: MentoLockProps) => {
-  const { walletAddress, balanceMENTO, lock } = useUserStore();
+  const { mentoBalance } = useTokens();
+  const { address } = useAccount();
   const { showConfirm } = useModal();
+  const { lockMento, isConfirmed, reset: resetHook } = useLockMento();
 
-  const patchValidationSchema = (value: number) => {
-    validationSchema = object({
-      toLock: number().required().typeError("Invalid number").max(value),
+  const validationSchema = useMemo(() => {
+    return object({
+      toLock: number()
+        .required()
+        .typeError("Invalid number")
+        .max(parseInt(formatUnits(mentoBalance.value, mentoBalance.decimal))),
       expiration: date()
         .required()
         .typeError("Invalid Date")
@@ -50,11 +42,7 @@ export const MentoLock = ({ className, style }: MentoLockProps) => {
         .typeError("Invalid number")
         .max(4 * 52),
     });
-  };
-
-  useEffect(() => {
-    patchValidationSchema(balanceMENTO);
-  }, [balanceMENTO]);
+  }, [mentoBalance]);
 
   setLocale({
     mixed: {
@@ -78,12 +66,12 @@ export const MentoLock = ({ className, style }: MentoLockProps) => {
     reset,
     trigger,
     formState: { errors, isValid },
-  } = useForm<FormData>({
+  } = useForm({
     resolver: yupResolver(validationSchema),
     mode: "all",
   });
 
-  const getMonths = () => {
+  const getMonths = useCallback(() => {
     const years = differenceInYears(
       getValues("expiration"),
       setISODay(new Date(), 3),
@@ -93,15 +81,15 @@ export const MentoLock = ({ className, style }: MentoLockProps) => {
       setISODay(addYears(new Date(), years), 3),
     );
     return months > 0 && `${months} ${months > 1 ? "months" : "month"}`;
-  };
+  }, [getValues]);
 
-  const getYears = () => {
+  const getYears = useCallback(() => {
     const years = differenceInYears(
       getValues("expiration"),
       setISODay(new Date(), 3),
     );
     return years > 0 && `${years} ${years > 1 ? "years" : "year"}`;
-  };
+  }, [getValues]);
 
   const dateSelected = (date: Date) => {
     setValue("expiration", date);
@@ -112,8 +100,8 @@ export const MentoLock = ({ className, style }: MentoLockProps) => {
     trigger("expiration");
   };
 
-  const performLock = () => {
-    if (isValid) {
+  const performLock = useCallback(() => {
+    if (isValid && address) {
       showConfirm(
         `Do you want to lock ${getValues("toLock")} MENTO for ${[
           getYears(),
@@ -127,20 +115,36 @@ export const MentoLock = ({ className, style }: MentoLockProps) => {
         },
       ).then((confirmed) => {
         if (confirmed) {
-          lock({
-            owner: walletAddress,
-            amountMNTO: getValues("toLock"),
-            amountsVeMNTO: Math.round(
-              getValues("toLock") * 100 * (getValues("expirationMonths") / 12),
-            ),
-            expireDate: getValues("expiration"),
-          } as ILock).then(() => {
-            reset();
-          });
+          lockMento(address, address, getValues("toLock"), 10, 10);
+          // lockMento({
+          //   owner: address,
+          //   amountMNTO: getValues("toLock"),
+          //   amountsVeMNTO: Math.round(
+          //     getValues("toLock") * 100 * (getValues("expirationMonths") / 12),
+          //   ),
+          //   expireDate: getValues("expiration"),
+          // } as ILock).then(() => {
+          //   reset();
+          // });
         }
       });
     }
-  };
+  }, [
+    address,
+    getMonths,
+    getValues,
+    getYears,
+    isValid,
+    lockMento,
+    showConfirm,
+  ]);
+
+  useEffect(() => {
+    if (isConfirmed) {
+      reset();
+      resetHook();
+    }
+  }, [isConfirmed, reset, resetHook]);
 
   const monthSelected = (months: number | string) => {
     const newDate = nextWednesday(addMonths(new Date(), +months));
@@ -149,8 +153,6 @@ export const MentoLock = ({ className, style }: MentoLockProps) => {
     trigger("expiration");
   };
 
-  patchValidationSchema(balanceMENTO);
-
   return (
     <div className={className} style={style}>
       <div className="flex flex-col lg:flex-row justify-between md:place-items-baseline gap-1 md:gap-5">
@@ -167,7 +169,7 @@ export const MentoLock = ({ className, style }: MentoLockProps) => {
                 <div className="flex justify-between gap-x3">
                   <div className="whitespace-nowrap">Max</div>
                   <div className="whitespace-nowrap">
-                    {balanceMENTO.toLocaleString()} MENTO
+                    {`${formatUnits(mentoBalance.value, mentoBalance.decimal)} ${mentoBalance.symbol}`}
                   </div>
                 </div>
               </div>
diff --git a/app/components/_shared/progress-bar/progress-bar.component.tsx b/src/components/_shared/progress-bar/progress-bar.component.tsx
similarity index 93%
rename from app/components/_shared/progress-bar/progress-bar.component.tsx
rename to src/components/_shared/progress-bar/progress-bar.component.tsx
index fc09812d..08da5e18 100644
--- a/app/components/_shared/progress-bar/progress-bar.component.tsx
+++ b/src/components/_shared/progress-bar/progress-bar.component.tsx
@@ -1,8 +1,8 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import styles from "./progress-bar.module.scss";
+import BaseComponentProps from "@/lib/interfaces/base-component-props.interface";
 import classNames from "classnames";
-import { useEffect, useMemo } from "react";
-import NumbersService from "@/app/helpers/numbers.service";
+import { useMemo } from "react";
+import styles from "./progress-bar.module.scss";
+import NumbersService from "@/lib/helpers/numbers.service";
 
 type Type = "success" | "info" | "warning" | "danger";
 
@@ -37,7 +37,7 @@ const barColor = (type: Type) => {
     case "danger":
       return "#FF848A";
     default:
-      "#D2FCBD";
+      return "#D2FCBD";
   }
 };
 
@@ -56,7 +56,6 @@ export const ProgressBar = ({
 
   const barColorString = type ? barColor(type) : "";
 
-  console.log("progress", progress);
   const progressStyles: ProgressStyle = useMemo(() => {
     if (progress < 3) {
       return {
diff --git a/app/components/_shared/progress-bar/progress-bar.module.scss b/src/components/_shared/progress-bar/progress-bar.module.scss
similarity index 96%
rename from app/components/_shared/progress-bar/progress-bar.module.scss
rename to src/components/_shared/progress-bar/progress-bar.module.scss
index ca5b4b90..0c779318 100644
--- a/app/components/_shared/progress-bar/progress-bar.module.scss
+++ b/src/components/_shared/progress-bar/progress-bar.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .progress_bar_wrapper {
   display: flex;
diff --git a/app/components/_shared/see-all/see-all.component.tsx b/src/components/_shared/see-all/see-all.component.tsx
similarity index 100%
rename from app/components/_shared/see-all/see-all.component.tsx
rename to src/components/_shared/see-all/see-all.component.tsx
index e893f1b1..d2fc05d3 100644
--- a/app/components/_shared/see-all/see-all.component.tsx
+++ b/src/components/_shared/see-all/see-all.component.tsx
@@ -1,6 +1,6 @@
+import { ReactNode } from "react";
 import classNames from "classnames";
 import styles from "./see-all.module.scss";
-import { ReactNode } from "react";
 
 interface SeeAllProps {
   isOpen: boolean;
diff --git a/app/components/_shared/see-all/see-all.module.scss b/src/components/_shared/see-all/see-all.module.scss
similarity index 91%
rename from app/components/_shared/see-all/see-all.module.scss
rename to src/components/_shared/see-all/see-all.module.scss
index 23bea82a..24e0525c 100644
--- a/app/components/_shared/see-all/see-all.module.scss
+++ b/src/components/_shared/see-all/see-all.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .container {
   position: relative;
diff --git a/app/components/_shared/slider/slider.component.tsx b/src/components/_shared/slider/slider.component.tsx
similarity index 92%
rename from app/components/_shared/slider/slider.component.tsx
rename to src/components/_shared/slider/slider.component.tsx
index a17103d3..ebf135bd 100644
--- a/app/components/_shared/slider/slider.component.tsx
+++ b/src/components/_shared/slider/slider.component.tsx
@@ -1,10 +1,10 @@
 "use client";
-import styles from "./slider.module.scss";
-import exports from "@styles/exports.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import classNames from "classnames";
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import BaseInputProps from "@interfaces/base-input-props.interface";
+import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import BaseInputProps from "@/interfaces/base-input-props.interface";
+import exports from "@/styles/exports.module.scss";
+import styles from "./slider.module.scss";
 
 interface SliderProps extends BaseComponentProps, BaseInputProps {
   compact?: boolean;
diff --git a/app/components/_shared/slider/slider.module.scss b/src/components/_shared/slider/slider.module.scss
similarity index 98%
rename from app/components/_shared/slider/slider.module.scss
rename to src/components/_shared/slider/slider.module.scss
index 670bafb9..87fe0749 100644
--- a/app/components/_shared/slider/slider.module.scss
+++ b/src/components/_shared/slider/slider.module.scss
@@ -1,5 +1,4 @@
-@import "@/app/brand";
-
+@import "@/styles/brand";
 
 .sliderWrapper {
   margin-top: 6 * $theme-unit;
diff --git a/app/components/_shared/status/status.component.tsx b/src/components/_shared/status/status.component.tsx
similarity index 87%
rename from app/components/_shared/status/status.component.tsx
rename to src/components/_shared/status/status.component.tsx
index 377d341b..c02b3be4 100644
--- a/app/components/_shared/status/status.component.tsx
+++ b/src/components/_shared/status/status.component.tsx
@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import styles from "./status.module.scss";
-import { BadgeType } from "@/app/types";
+import { BadgeType } from "@/lib/types";
 
 interface StatusProps {
   text: string;
diff --git a/app/components/_shared/status/status.module.scss b/src/components/_shared/status/status.module.scss
similarity index 96%
rename from app/components/_shared/status/status.module.scss
rename to src/components/_shared/status/status.module.scss
index 683bc1c1..a0710550 100644
--- a/app/components/_shared/status/status.module.scss
+++ b/src/components/_shared/status/status.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 @mixin branded-badge($border-color, $background-color) {
   border: 1px solid $border-color;
diff --git a/app/components/_shared/step-counter/step-counter.component.tsx b/src/components/_shared/step-counter/step-counter.component.tsx
similarity index 81%
rename from app/components/_shared/step-counter/step-counter.component.tsx
rename to src/components/_shared/step-counter/step-counter.component.tsx
index 659d29b1..e17d6008 100644
--- a/app/components/_shared/step-counter/step-counter.component.tsx
+++ b/src/components/_shared/step-counter/step-counter.component.tsx
@@ -1,5 +1,5 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import styles from "./step-counter.module.scss";
 
 interface StepCounterProps extends BaseComponentProps {}
diff --git a/app/components/_shared/step-counter/step-counter.module.scss b/src/components/_shared/step-counter/step-counter.module.scss
similarity index 96%
rename from app/components/_shared/step-counter/step-counter.module.scss
rename to src/components/_shared/step-counter/step-counter.module.scss
index 769a2e2e..0c6cac78 100644
--- a/app/components/_shared/step-counter/step-counter.module.scss
+++ b/src/components/_shared/step-counter/step-counter.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 $box-size: 4px;
 
diff --git a/app/components/_shared/tabs/tab-list.component.tsx b/src/components/_shared/tabs/tab-list.component.tsx
similarity index 94%
rename from app/components/_shared/tabs/tab-list.component.tsx
rename to src/components/_shared/tabs/tab-list.component.tsx
index 1cd12ae4..fdabec2c 100644
--- a/app/components/_shared/tabs/tab-list.component.tsx
+++ b/src/components/_shared/tabs/tab-list.component.tsx
@@ -1,8 +1,8 @@
 "use strict";
-import styles from "./tabs.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import classNames from "classnames";
 import { Children, useState } from "react";
+import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import styles from "./tabs.module.scss";
 
 export interface TabListProps extends BaseComponentProps {
   tabs: string[];
diff --git a/app/components/_shared/tabs/tab.component.tsx b/src/components/_shared/tabs/tab.component.tsx
similarity index 68%
rename from app/components/_shared/tabs/tab.component.tsx
rename to src/components/_shared/tabs/tab.component.tsx
index 6b6be1e1..ce31d278 100644
--- a/app/components/_shared/tabs/tab.component.tsx
+++ b/src/components/_shared/tabs/tab.component.tsx
@@ -1,6 +1,5 @@
-import styles from "./tabs.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 
 interface TabProps extends BaseComponentProps {}
 
diff --git a/app/components/_shared/tabs/tabs.module.scss b/src/components/_shared/tabs/tabs.module.scss
similarity index 97%
rename from app/components/_shared/tabs/tabs.module.scss
rename to src/components/_shared/tabs/tabs.module.scss
index 803d471e..a73800e6 100644
--- a/app/components/_shared/tabs/tabs.module.scss
+++ b/src/components/_shared/tabs/tabs.module.scss
@@ -1,4 +1,4 @@
-@import '@/app/brand';
+@import '@/styles/brand';
 
 
 .tabView {
diff --git a/app/components/_shared/textarea/textarea.component.tsx b/src/components/_shared/textarea/textarea.component.tsx
similarity index 84%
rename from app/components/_shared/textarea/textarea.component.tsx
rename to src/components/_shared/textarea/textarea.component.tsx
index 96245f97..11e6da93 100644
--- a/app/components/_shared/textarea/textarea.component.tsx
+++ b/src/components/_shared/textarea/textarea.component.tsx
@@ -1,7 +1,7 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import BaseInputProps from "@interfaces/base-input-props.interface";
-import classNames from "classnames";
 import { ReactNode } from "react";
+import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import BaseInputProps from "@/interfaces/base-input-props.interface";
 import styles from "./textarea.module.scss";
 
 interface TextAreaProps extends BaseComponentProps, BaseInputProps {
diff --git a/app/components/_shared/textarea/textarea.module.scss b/src/components/_shared/textarea/textarea.module.scss
similarity index 93%
rename from app/components/_shared/textarea/textarea.module.scss
rename to src/components/_shared/textarea/textarea.module.scss
index 694dd0f2..8f9c2ce9 100644
--- a/app/components/_shared/textarea/textarea.module.scss
+++ b/src/components/_shared/textarea/textarea.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .wrapper {
   width: 100%;
diff --git a/app/components/_shared/vote-loading-state/vote-loading-state.tsx b/src/components/_shared/vote-loading-state/vote-loading-state.tsx
similarity index 64%
rename from app/components/_shared/vote-loading-state/vote-loading-state.tsx
rename to src/components/_shared/vote-loading-state/vote-loading-state.tsx
index 153a14ac..46515f38 100644
--- a/app/components/_shared/vote-loading-state/vote-loading-state.tsx
+++ b/src/components/_shared/vote-loading-state/vote-loading-state.tsx
@@ -1,5 +1,5 @@
-import { Card, Loader } from "..";
-import VotingCardTitle from "../vote-voting-card-title/voting-card-title";
+import { Card, Loader } from "@/components/_shared";
+import VotingCardTitle from "@/components/_shared/vote-voting-card-title/voting-card-title";
 
 const LoadingState = () => {
   return (
diff --git a/app/components/_shared/vote-voting-card-title/voting-card-title.tsx b/src/components/_shared/vote-voting-card-title/voting-card-title.tsx
similarity index 87%
rename from app/components/_shared/vote-voting-card-title/voting-card-title.tsx
rename to src/components/_shared/vote-voting-card-title/voting-card-title.tsx
index 189e8bcd..ff160e7d 100644
--- a/app/components/_shared/vote-voting-card-title/voting-card-title.tsx
+++ b/src/components/_shared/vote-voting-card-title/voting-card-title.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Card } from "@/app/components/_shared";
+import { Card } from "@/components/_shared";
+
 const VotingCardTitle = ({
   children = "Cast Votes",
 }: React.PropsWithChildren) => {
diff --git a/app/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component.tsx b/src/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component.tsx
similarity index 73%
rename from app/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component.tsx
rename to src/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component.tsx
index 6add0768..96c2ccff 100644
--- a/app/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component.tsx
+++ b/src/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component.tsx
@@ -1,8 +1,8 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
 import classNames from "classnames";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { CopyIcon } from "../../_icons/copy.icon";
-import { WalletAddress } from "../../wallet-address/wallet-address.component";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import { CopyIcon } from "@/components/_icons/copy.icon";
+import { WalletAddress } from "@/components/wallet-address/wallet-address.component";
 
 interface WalletAddressWithCopyProps extends BaseComponentProps {
   address: string;
diff --git a/app/components/contract-params/contract-params.component.tsx b/src/components/contract-params/contract-params.component.tsx
similarity index 93%
rename from app/components/contract-params/contract-params.component.tsx
rename to src/components/contract-params/contract-params.component.tsx
index f53625d9..0ce22e19 100644
--- a/app/components/contract-params/contract-params.component.tsx
+++ b/src/components/contract-params/contract-params.component.tsx
@@ -6,13 +6,13 @@ import CopyToClipboard from "react-copy-to-clipboard";
 import { formatUnits } from "viem";
 import { useAccount, useReadContracts } from "wagmi";
 
-import { Card } from "@components/_shared";
-import WalletHelper from "@/app/helpers/wallet.helper";
-import { CopyIcon } from "../_icons/copy.icon";
-import { TimelockControllerABI } from "@/app/abis/TimelockController";
-import { GovernorABI } from "@/app/abis/Governor";
-import { Celo } from "@/app/helpers/chains";
-import { useContracts } from "@/app/hooks/useContracts";
+import { Card } from "@/components/_shared";
+import WalletHelper from "@/lib/helpers/wallet.helper";
+import { CopyIcon } from "@/components/_icons/copy.icon";
+import { TimelockControllerABI } from "@/lib/abi/TimelockController";
+import { GovernorABI } from "@/lib/abi/Governor";
+import { Celo } from "@/config/chains";
+import { useContracts } from "@/lib/contracts/useContracts";
 
 export const ContractParams = () => {
   const governanceDetails = useGovernanceDetails();
@@ -160,10 +160,11 @@ const ContractAddressLinkWithCopy = ({
 function useGovernanceDetails() {
   const governanceContractAddresses = useGovernanceContractAddresses();
 
-  const govenorContact = {
+  const governorContact = {
     address: governanceContractAddresses.governor,
     abi: GovernorABI,
   } as const;
+
   const timeLockContract = {
     address: governanceContractAddresses.timelock,
     abi: TimelockControllerABI,
@@ -172,15 +173,15 @@ function useGovernanceDetails() {
   const result = useReadContracts({
     contracts: [
       {
-        ...govenorContact,
+        ...governorContact,
         functionName: "votingPeriod",
       },
       {
-        ...govenorContact,
+        ...governorContact,
         functionName: "proposalThreshold",
       },
       {
-        ...govenorContact,
+        ...governorContact,
         functionName: "quorumVotes",
       },
       {
diff --git a/app/components/countdown/countdown.component.tsx b/src/components/countdown/countdown.component.tsx
similarity index 96%
rename from app/components/countdown/countdown.component.tsx
rename to src/components/countdown/countdown.component.tsx
index 1cf9f8b6..5e99b755 100644
--- a/app/components/countdown/countdown.component.tsx
+++ b/src/components/countdown/countdown.component.tsx
@@ -1,7 +1,7 @@
 "use client";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import classNames from "classnames";
 import { useEffect, useState } from "react";
+import classNames from "classnames";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import styles from "./countdown.module.scss";
 
 const getTimeLeftValues = (countDown: number) => {
diff --git a/app/components/countdown/countdown.module.scss b/src/components/countdown/countdown.module.scss
similarity index 93%
rename from app/components/countdown/countdown.module.scss
rename to src/components/countdown/countdown.module.scss
index 8ae27e8b..d7e21667 100644
--- a/app/components/countdown/countdown.module.scss
+++ b/src/components/countdown/countdown.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .countdown {
   display: flex;
diff --git a/app/components/create-proposal/create-proposal-content-step/create-proposal-content-step.component.tsx b/src/components/create-proposal/create-proposal-content-step/create-proposal-content-step.component.tsx
similarity index 61%
rename from app/components/create-proposal/create-proposal-content-step/create-proposal-content-step.component.tsx
rename to src/components/create-proposal/create-proposal-content-step/create-proposal-content-step.component.tsx
index 5a443cb8..b74ac40f 100644
--- a/app/components/create-proposal/create-proposal-content-step/create-proposal-content-step.component.tsx
+++ b/src/components/create-proposal/create-proposal-content-step/create-proposal-content-step.component.tsx
@@ -1,33 +1,29 @@
 "use client";
-import { Input, MarkdownEditor } from "@components/_shared";
-import { InferType, object, setLocale, string } from "yup";
+import { useEffect } from "react";
+import { object, setLocale, string } from "yup";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import Wrapper from "@components/create-proposal/wrapper/wrapper.component";
-import { CreateProposalFormStepEnum } from "@interfaces/create-proposal.interface";
-import { useCreateProposalStore } from "@/app/store";
-import { useEffect } from "react";
+import { Input, MarkdownEditor } from "@/components/_shared";
+import CreateProposalWrapper from "@/components/create-proposal/create-proposal-wrapper/create-proposal-wrapper.component";
+import {
+  CreateProposalStep,
+  useCreateProposal,
+} from "@/components/create-proposal/create-proposal-provider";
 
-const validationSchema = object({
+const validationSchema = object().shape({
   title: string().required().typeError("Invalid title"),
   content: string().required().typeError("Invalid description"),
 });
 
-type FormData = InferType<typeof validationSchema>;
-
-const formStep = CreateProposalFormStepEnum.content;
-
 export const CreateProposalContentStep = () => {
-  const { patchContentStep } = useCreateProposalStore();
+  const { setStep, updateProposal, newProposal } = useCreateProposal();
 
   const {
     register,
     watch,
     setValue,
-    getValues,
-    handleSubmit,
     formState: { errors, isValid },
-  } = useForm<FormData>({
+  } = useForm({
     resolver: yupResolver(validationSchema),
     mode: "onChange",
   });
@@ -40,16 +36,22 @@ export const CreateProposalContentStep = () => {
 
   useEffect(() => {
     const subscription = watch((value) => {
-      patchContentStep({
+      updateProposal({
         title: value.title || "",
         description: value.content || "",
+        code: newProposal.code,
       });
     });
     return () => subscription.unsubscribe();
-  }, [watch, patchContentStep]);
+  }, [watch, updateProposal, newProposal.code, isValid]);
 
   return (
-    <Wrapper step={formStep} title="Add name and description">
+    <CreateProposalWrapper
+      componentStep={CreateProposalStep.content}
+      title="Add name and description"
+      onPrev={() => setStep(CreateProposalStep.wallet)}
+      onNext={isValid ? () => setStep(CreateProposalStep.execution) : undefined}
+    >
       <div>
         <p className="font-size-x4 line-height-x5 mb-4 ml-x7">
           Give your proposal a title and a description. They will be public when
@@ -69,6 +71,6 @@ export const CreateProposalContentStep = () => {
           markdownChanged={(value) => setValue("content", value)}
         />
       </div>
-    </Wrapper>
+    </CreateProposalWrapper>
   );
 };
diff --git a/src/components/create-proposal/create-proposal-execution-step/create-proposal-execution-step.component.tsx b/src/components/create-proposal/create-proposal-execution-step/create-proposal-execution-step.component.tsx
new file mode 100644
index 00000000..77aa48bb
--- /dev/null
+++ b/src/components/create-proposal/create-proposal-execution-step/create-proposal-execution-step.component.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { useEffect } from "react";
+import { object, setLocale, string } from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Textarea } from "@/components/_shared";
+import CreateProposalWrapper from "@/components/create-proposal/create-proposal-wrapper/create-proposal-wrapper.component";
+import {
+  CreateProposalStep,
+  useCreateProposal,
+} from "@/components/create-proposal/create-proposal-provider";
+
+const validationSchema = object().shape({
+  code: string()
+    .test("json", "Invalid JSON format", (value) => {
+      if (!value) return true;
+
+      try {
+        JSON.parse(value);
+        return true;
+      } catch (error) {
+        return false;
+      }
+    })
+    .typeError("Invalid code"),
+});
+
+export const CreateProposalExecutionStep = () => {
+  const { setStep, newProposal, updateProposal } = useCreateProposal();
+
+  const {
+    register,
+    watch,
+    formState: { errors, isValid },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    mode: "onChange",
+  });
+
+  setLocale({
+    mixed: {
+      default: "Value is required",
+    },
+  });
+
+  useEffect(() => {
+    const subscription = watch((value) => {
+      value?.code &&
+        updateProposal({
+          ...newProposal,
+          code: value.code,
+        });
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, updateProposal, newProposal]);
+
+  return (
+    <CreateProposalWrapper
+      componentStep={CreateProposalStep.execution}
+      title="Execution Code"
+      onPrev={() => setStep(CreateProposalStep.content)}
+      onNext={isValid ? () => setStep(CreateProposalStep.preview) : undefined}
+    >
+      <div>
+        <p className="font-size-x4 line-height-x5 ml-x7">
+          Paste your governance proposal&apos;s execution code in the json
+          format in the field below:
+        </p>
+        <Textarea
+          className="mt-x5 mb-x5 min-h-[266px]"
+          form={{ ...register("code") }}
+          id="code"
+          error={errors.code?.message}
+          placeholder="Paste your code here"
+        />
+      </div>
+    </CreateProposalWrapper>
+  );
+};
diff --git a/src/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx b/src/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx
new file mode 100644
index 00000000..8115d376
--- /dev/null
+++ b/src/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx
@@ -0,0 +1,49 @@
+"use client";
+import { useState } from "react";
+import { ExecutionCodeView, MarkdownView, SeeAll } from "@/components/_shared";
+import styles from "./create-proposal-preview-step.module.scss";
+import CreateProposalWrapper from "@/components/create-proposal/create-proposal-wrapper/create-proposal-wrapper.component";
+import {
+  CreateProposalStep,
+  useCreateProposal,
+} from "@/components/create-proposal/create-proposal-provider";
+import useCreateProposalOnChain from "@/lib/contracts/governor/useCreateProposalOnChain";
+
+export const CreateProposalPreviewStep = () => {
+  const [isProposalPreviewOpen, setIsProposalPreviewOpen] = useState(false);
+  const { createError, createTx } = useCreateProposalOnChain();
+  const { setStep, newProposal, submitProposal } = useCreateProposal();
+
+  return (
+    <CreateProposalWrapper
+      componentStep={CreateProposalStep.preview}
+      title="Preview your proposal"
+      onPrev={() => setStep(CreateProposalStep.execution)}
+      className={styles.container}
+      onSave={submitProposal}
+    >
+      <pre>{JSON.stringify(createTx, null, 2)}</pre>
+      <pre>{createError ? createError.message : null}</pre>
+      <div className="ml-x7">
+        <p className="font-size-x4 line-height-x5">
+          You&apos;ve successfully finished all the steps. Now, take a moment to
+          go over your proposal and then submit it.
+        </p>
+        <div className={styles.title}>{newProposal.title}</div>
+        <div>
+          <h3 className={styles.form_data_title}>Proposal Description</h3>
+          <SeeAll
+            height="315"
+            isOpen={isProposalPreviewOpen}
+            setIsOpen={setIsProposalPreviewOpen}
+          >
+            <MarkdownView markdown={newProposal.description} />
+          </SeeAll>
+          {newProposal.code != "" && (
+            <ExecutionCodeView code={newProposal.code} />
+          )}
+        </div>
+      </div>
+    </CreateProposalWrapper>
+  );
+};
diff --git a/app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.module.scss b/src/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.module.scss
similarity index 96%
rename from app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.module.scss
rename to src/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.module.scss
index 2a2a04bc..4a58fb08 100644
--- a/app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.module.scss
+++ b/src/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .container {
   .title {
diff --git a/src/components/create-proposal/create-proposal-provider.tsx b/src/components/create-proposal/create-proposal-provider.tsx
new file mode 100644
index 00000000..711dd408
--- /dev/null
+++ b/src/components/create-proposal/create-proposal-provider.tsx
@@ -0,0 +1,104 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+import useCreateProposalOnChain from "@/lib/contracts/governor/useCreateProposalOnChain";
+
+export enum CreateProposalStep {
+  wallet = 1,
+  content = 2,
+  execution = 3,
+  preview = 4,
+}
+
+type CreateProposalForm = {
+  title: string;
+  description: string;
+  code: string;
+};
+
+export interface ICreateProposalContext {
+  step: CreateProposalStep;
+  setStep: (step: CreateProposalStep) => void;
+  newProposal: CreateProposalForm;
+  updateProposal: (updatedProposal: CreateProposalForm) => void;
+  submitProposal: () => void;
+}
+
+const CreateProposalContext = createContext<ICreateProposalContext | undefined>(
+  undefined,
+);
+
+interface ICreateProposalProvider {
+  children: ReactNode | ReactNode[];
+}
+
+export const CreateProposalProvider = ({
+  children,
+}: ICreateProposalProvider) => {
+  const freshProposal = {
+    description: "",
+    title: "",
+    code: "",
+  };
+
+  const [step, setStep] = useState<CreateProposalStep>(
+    CreateProposalStep.wallet,
+  );
+  const { createProposal } = useCreateProposalOnChain();
+
+  const [newProposal, updateProposal] = useState(freshProposal);
+
+  const submitProposal = useCallback(() => {
+    let transactions = [];
+    try {
+      transactions = JSON.parse(newProposal.code);
+    } catch (e) {
+      /* empty */
+    }
+
+    if (transactions.length === 0) {
+      transactions = [
+        {
+          address: "0x0000000000000000000000000000000000000000",
+          value: 0,
+          data: "0x",
+        },
+      ];
+    }
+    createProposal({
+      metadata: {
+        title: newProposal.title,
+        description: newProposal.description,
+      },
+      transactions,
+    });
+  }, [createProposal, newProposal]);
+
+  return (
+    <CreateProposalContext.Provider
+      value={{
+        step,
+        setStep,
+        newProposal,
+        updateProposal,
+        submitProposal,
+      }}
+    >
+      {children}
+    </CreateProposalContext.Provider>
+  );
+};
+
+export function useCreateProposal() {
+  const context = useContext(CreateProposalContext);
+  if (context === undefined) {
+    throw new Error(
+      "useCreateProposal must be used within a CreateProposalProvider",
+    );
+  }
+  return context;
+}
diff --git a/app/components/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx b/src/components/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx
similarity index 62%
rename from app/components/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx
rename to src/components/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx
index 14e7213d..1061d275 100644
--- a/app/components/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx
+++ b/src/components/create-proposal/create-proposal-wallet-step/create-proposal-wallet-step.component.tsx
@@ -1,10 +1,13 @@
-import { ConnectButton, MentoLock } from "@components/_shared";
-import { CreateProposalFormStepEnum } from "@interfaces/create-proposal.interface";
-import Wrapper from "@components/create-proposal/wrapper/wrapper.component";
-import { useCreateProposalStore, useUserStore } from "@/app/store";
-import { useCallback, useEffect, useState } from "react";
-
-const formStep = CreateProposalFormStepEnum.wallet;
+import { ConnectButton, MentoLock } from "@/components/_shared";
+import { useCallback, useState } from "react";
+import { useAccount } from "wagmi";
+import useTokens from "@/lib/contracts/useTokens";
+import CreateProposalWrapper from "@/components/create-proposal/create-proposal-wrapper/create-proposal-wrapper.component";
+import {
+  CreateProposalStep,
+  useCreateProposal,
+} from "@/components/create-proposal/create-proposal-provider";
+import { parseUnits } from "viem";
 
 enum WalletStepEnum {
   connectWallet = "connectWallet",
@@ -61,41 +64,39 @@ const CurrentFormStep = ({ formStep }: { formStep: WalletStepEnum }) => {
 };
 
 export const CreateProposalWalletStep = () => {
-  const { walletAddress, balanceVeMENTO, balanceMENTO } = useUserStore();
-  const { form, patchWalletStep } = useCreateProposalStore();
+  const { address } = useAccount();
+  const { mentoBalance, veMentoBalance } = useTokens();
+  const { setStep } = useCreateProposal();
 
   const getAndValidateStep = useCallback((): WalletStepEnum => {
-    if (!walletAddress) {
+    if (!address) {
       return WalletStepEnum.connectWallet;
-    } else if (balanceMENTO <= 10) {
+    } else if (mentoBalance.value <= parseUnits("10", mentoBalance.decimal)) {
       return WalletStepEnum.buyMento;
-    } else if (balanceVeMENTO < 2500) {
+    } else if (
+      veMentoBalance.value < parseUnits("2500", veMentoBalance.decimal)
+    ) {
       return WalletStepEnum.lockMento;
     } else {
       return WalletStepEnum.createProposal;
     }
-  }, [walletAddress, balanceVeMENTO, balanceMENTO]);
-
-  const [walletFormStep, setFormStep] = useState(getAndValidateStep());
-
-  useEffect(() => {
-    setFormStep(getAndValidateStep());
-    patchWalletStep({
-      walletAddress: walletAddress || "",
-      balanceVeMENTO,
-      balanceMENTO,
-    });
   }, [
-    walletAddress,
-    balanceVeMENTO,
-    balanceMENTO,
-    getAndValidateStep,
-    patchWalletStep,
+    address,
+    mentoBalance.decimal,
+    mentoBalance.value,
+    veMentoBalance.decimal,
+    veMentoBalance.value,
   ]);
 
+  const [walletFormStep] = useState(getAndValidateStep());
+
   return (
-    <Wrapper step={formStep} title="Connect your wallet & login">
+    <CreateProposalWrapper
+      componentStep={CreateProposalStep.wallet}
+      onNext={() => setStep(CreateProposalStep.content)}
+      title="Connect your wallet & login"
+    >
       <CurrentFormStep formStep={walletFormStep} />
-    </Wrapper>
+    </CreateProposalWrapper>
   );
 };
diff --git a/src/components/create-proposal/create-proposal-wrapper/create-proposal-wrapper.component.tsx b/src/components/create-proposal/create-proposal-wrapper/create-proposal-wrapper.component.tsx
new file mode 100644
index 00000000..365a5f99
--- /dev/null
+++ b/src/components/create-proposal/create-proposal-wrapper/create-proposal-wrapper.component.tsx
@@ -0,0 +1,80 @@
+import { ReactNode, useMemo } from "react";
+import classNames from "classnames";
+import { Button, Card, StepCounter } from "@/components/_shared";
+import styles from "../create-proposal.module.scss";
+import {
+  CreateProposalStep,
+  useCreateProposal,
+} from "@/components/create-proposal/create-proposal-provider";
+
+interface ICreateProposalWrapper {
+  className?: string;
+  componentStep: CreateProposalStep;
+  title: string;
+  children: ReactNode | ReactNode[];
+  onPrev?: () => void;
+  onNext?: () => void;
+  onSave?: () => void;
+}
+
+const CreateProposalWrapper = ({
+  children,
+  className,
+  componentStep,
+  title,
+  onPrev,
+  onNext,
+  onSave,
+}: ICreateProposalWrapper) => {
+  const { step } = useCreateProposal();
+
+  const isOpen = useMemo(() => {
+    return step === componentStep;
+  }, [componentStep, step]);
+
+  return (
+    <Card
+      block
+      className={classNames(
+        "pb-0",
+        styles.wrapper,
+        className,
+        !isOpen && "opacity-50",
+      )}
+    >
+      <Card.Header>
+        <div className={styles.title}>
+          <StepCounter>{componentStep}</StepCounter>
+          {title}
+        </div>
+      </Card.Header>
+      <div className={classNames(styles.form_element, isOpen && styles.opened)}>
+        <div className={styles.inner}>{children}</div>
+        <Card.Footer>
+          <div className="flex full-w justify-start items-center gap-x3">
+            <Button
+              className="min-w-x20"
+              onClick={onPrev}
+              disabled={!onPrev}
+              theme="tertiary"
+            >
+              Back
+            </Button>
+            {onNext !== undefined && (
+              <Button className="min-w-x20" onClick={onNext} theme="primary">
+                Next
+              </Button>
+            )}
+            {onSave !== undefined && (
+              <Button className="min-w-x20" onClick={onSave} theme="primary">
+                Save
+              </Button>
+            )}
+          </div>
+        </Card.Footer>
+      </div>
+    </Card>
+  );
+};
+
+export default CreateProposalWrapper;
diff --git a/app/components/create-proposal/create-proposal.module.scss b/src/components/create-proposal/create-proposal.module.scss
similarity index 97%
rename from app/components/create-proposal/create-proposal.module.scss
rename to src/components/create-proposal/create-proposal.module.scss
index 04e7fdc3..65effd4f 100644
--- a/app/components/create-proposal/create-proposal.module.scss
+++ b/src/components/create-proposal/create-proposal.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .wrapper {
   padding: 4 * $theme-unit;
diff --git a/app/components/create-proposal/index.tsx b/src/components/create-proposal/index.tsx
similarity index 100%
rename from app/components/create-proposal/index.tsx
rename to src/components/create-proposal/index.tsx
diff --git a/app/components/locks-list/locks-list.component.tsx b/src/components/locks-list/locks-list.component.tsx
similarity index 67%
rename from app/components/locks-list/locks-list.component.tsx
rename to src/components/locks-list/locks-list.component.tsx
index 6e6f4a70..0ea8c41a 100644
--- a/app/components/locks-list/locks-list.component.tsx
+++ b/src/components/locks-list/locks-list.component.tsx
@@ -1,19 +1,13 @@
-import { LockingABI } from "@/app/abis/Locking";
-import { GetLocksDocument, Lock } from "@/app/graphql";
-import { useContracts } from "@/app/hooks/useContracts";
-import useModal from "@/app/providers/modal.provider";
+import { LockingABI } from "@/lib/abi/Locking";
+import { GetLocksDocument, Lock } from "@/lib/graphql";
+import { useContracts } from "@/lib/contracts/useContracts";
 import { useSuspenseQuery } from "@apollo/client";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import classNames from "classnames";
 import { addWeeks, nextWednesday } from "date-fns";
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { formatUnits } from "viem";
-import {
-  useAccount,
-  useChainId,
-  useReadContract,
-  useWriteContract,
-} from "wagmi";
+import { useChainId, useReadContract } from "wagmi";
 import styles from "./locks-list.module.scss";
 
 interface LocksListProps extends BaseComponentProps {
@@ -53,16 +47,12 @@ export const LocksList = ({ address }: LocksListProps) => {
 const LockEntry = ({
   lock,
   key,
-  onExtend,
 }: {
   lock: Lock;
   key: string | number;
   onExtend: () => void;
 }) => {
   const contracts = useContracts();
-  const { showConfirm } = useModal();
-  const { address } = useAccount();
-  const { error, writeContract } = useWriteContract();
 
   const { data: getLock } = useReadContract({
     address: contracts.Locking.address,
@@ -75,7 +65,7 @@ const LockEntry = ({
     return Number(formatUnits(lock.amount || 0n, 18)).toLocaleString();
   }, [lock.amount]);
 
-  const vementoParsed = useMemo(() => {
+  const veMentoParsed = useMemo(() => {
     return Number(formatUnits(getLock?.[0] || 0n, 18)).toLocaleString();
   }, [getLock]);
 
@@ -85,41 +75,43 @@ const LockEntry = ({
     return endDate.toLocaleDateString();
   }, [lock]);
 
-  const reLock = useCallback(async () => {
-    const res = await showConfirm(
-      `Are you sure you want to extend lock ${lock.lockId}?`,
-    );
+  // const reLock = useCallback(async () => {
+  //   const res = await showConfirm(
+  //     `Are you sure you want to extend lock ${lock.lockId}?`,
+  //   );
 
-    if (!res) return;
+  //   if (!res) return;
 
-    writeContract(
-      {
-        address: contracts.Locking.address,
-        abi: LockingABI,
-        functionName: "relock",
-        args: [lock.lockId, address!, lock.amount, lock.slope, lock.cliff],
-      },
-      {
-        onSuccess: () => {
-          onExtend();
-        },
-      },
-    );
-  }, [
-    writeContract,
-    contracts.Locking.address,
-    lock.lockId,
-    lock.amount,
-    lock.slope,
-    lock.cliff,
-    address,
-  ]);
+  //   writeContract(
+  //     {
+  //       address: contracts.Locking.address,
+  //       abi: LockingABI,
+  //       functionName: "relock",
+  //       args: [lock.lockId, address!, lock.amount, lock.slope, lock.cliff],
+  //     },
+  //     {
+  //       onSuccess: () => {
+  //         onExtend();
+  //       },
+  //     },
+  //   );
+  // }, [
+  //   showConfirm,
+  //   lock.lockId,
+  //   lock.amount,
+  //   lock.slope,
+  //   lock.cliff,
+  //   writeContract,
+  //   contracts.Locking.address,
+  //   address,
+  //   onExtend,
+  // ]);
 
   return (
     <div className={styles.locksList__row} key={key}>
       <div className={styles.divider}></div>
       <div className={styles.item}>{mentoParsed}</div>
-      <div className={styles.item}>{vementoParsed}</div>
+      <div className={styles.item}>{veMentoParsed}</div>
       <div className={styles.item}>{expirationDate}</div>
       {/*<div>*/}
       {/*  <DropdownButton className="md:hidden" theme="clear">*/}
diff --git a/app/components/locks-list/locks-list.module.scss b/src/components/locks-list/locks-list.module.scss
similarity index 95%
rename from app/components/locks-list/locks-list.module.scss
rename to src/components/locks-list/locks-list.module.scss
index b6753194..c4737140 100644
--- a/app/components/locks-list/locks-list.module.scss
+++ b/src/components/locks-list/locks-list.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .locksList {
   @include card-table-overflow-shadows;
diff --git a/app/components/proposal-current-votes/proposal-current-votes.component.tsx b/src/components/proposal-current-votes/proposal-current-votes.component.tsx
similarity index 73%
rename from app/components/proposal-current-votes/proposal-current-votes.component.tsx
rename to src/components/proposal-current-votes/proposal-current-votes.component.tsx
index b19af4ac..16a63196 100644
--- a/app/components/proposal-current-votes/proposal-current-votes.component.tsx
+++ b/src/components/proposal-current-votes/proposal-current-votes.component.tsx
@@ -1,13 +1,13 @@
-import { useProposalDetailsStore } from "@/app/store";
-import { Card } from "@components/_shared";
+import { Card } from "@/components/_shared";
 import {
   MultiProgressBar,
   MultiProgressBarValue,
-} from "@components/_shared/progress-bar/progress-bar.component";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
+} from "@/components/_shared/progress-bar/progress-bar.component";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import classNames from "classnames";
-import { useCallback, useEffect, useState } from "react";
 import styles from "./proposal-current-votes.module.scss";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { IVote } from "@/lib/interfaces/vote.interface";
 
 interface ProposalCurrentVotesProps extends BaseComponentProps {}
 
@@ -16,28 +16,42 @@ export const ProposalCurrentVotes = ({
   className,
   style,
 }: ProposalCurrentVotesProps) => {
-  const { votes } = useProposalDetailsStore();
+  // TODO: Replace with context fetch to api
+  const votes: IVote[] = useMemo(() => [], []);
+
+  const forProposal = useMemo(
+    () => votes.filter((vote) => vote.type === "for"),
+    [votes],
+  );
+  const againstProposal = useMemo(
+    () => votes.filter((vote) => vote.type === "against"),
+    [votes],
+  );
+  const abstainProposal = useMemo(
+    () => votes.filter((vote) => vote.type === "abstain"),
+    [votes],
+  );
 
   const parseVotes = useCallback(() => {
     return [
       {
-        value: votes.for.reduce((acc, vote) => acc + vote.votes, 0),
+        value: forProposal.reduce((acc, vote) => acc + vote.votes, 0),
         type: "success",
       },
       {
-        value: votes.against.reduce((acc, vote) => acc + vote.votes, 0),
+        value: againstProposal.reduce((acc, vote) => acc + vote.votes, 0),
         type: "danger",
       },
     ] as MultiProgressBarValue[];
-  }, [votes]);
+  }, [againstProposal, forProposal]);
 
   const parseMax = useCallback(() => {
     return (
-      votes.for.reduce((acc, vote) => acc + vote.votes, 0) +
-      votes.against.reduce((acc, vote) => acc + vote.votes, 0) +
-      votes.abstain.reduce((acc, vote) => acc + vote.votes, 0)
+      forProposal.reduce((acc, vote) => acc + vote.votes, 0) +
+      againstProposal.reduce((acc, vote) => acc + vote.votes, 0) +
+      abstainProposal.reduce((acc, vote) => acc + vote.votes, 0)
     );
-  }, [votes]);
+  }, [abstainProposal, againstProposal, forProposal]);
 
   const [values, setValues] = useState(parseVotes());
   const [max, setMax] = useState(parseMax());
@@ -63,7 +77,7 @@ export const ProposalCurrentVotes = ({
               <div>For</div>
             </div>
             <div>
-              {votes.for
+              {forProposal
                 .reduce((acc, vote) => acc + vote.votes, 0)
                 .toLocaleString()}
             </div>
@@ -74,7 +88,7 @@ export const ProposalCurrentVotes = ({
               <div>Against</div>
             </div>
             <div>
-              {votes.against
+              {againstProposal
                 .reduce((acc, vote) => acc + vote.votes, 0)
                 .toLocaleString()}
             </div>
@@ -85,7 +99,7 @@ export const ProposalCurrentVotes = ({
               <div>Abstain</div>
             </div>
             <div>
-              {votes.abstain
+              {abstainProposal
                 .reduce((acc, vote) => acc + vote.votes, 0)
                 .toLocaleString()}
             </div>
diff --git a/app/components/proposal-current-votes/proposal-current-votes.module.scss b/src/components/proposal-current-votes/proposal-current-votes.module.scss
similarity index 94%
rename from app/components/proposal-current-votes/proposal-current-votes.module.scss
rename to src/components/proposal-current-votes/proposal-current-votes.module.scss
index 22aa911d..74eb5d5d 100644
--- a/app/components/proposal-current-votes/proposal-current-votes.module.scss
+++ b/src/components/proposal-current-votes/proposal-current-votes.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .vote_tag {
   width: $theme-unit * 3;
diff --git a/app/components/proposal-summary/proposal-summary.component.tsx b/src/components/proposal-summary/proposal-summary.component.tsx
similarity index 65%
rename from app/components/proposal-summary/proposal-summary.component.tsx
rename to src/components/proposal-summary/proposal-summary.component.tsx
index a1c9fc9b..b6b7a914 100644
--- a/app/components/proposal-summary/proposal-summary.component.tsx
+++ b/src/components/proposal-summary/proposal-summary.component.tsx
@@ -1,41 +1,17 @@
-import { LockingABI } from "@/app/abis/Locking";
-import { GetAllLocks, GetProposals, Lock, Proposal } from "@/app/graphql";
-import NumbersService from "@/app/helpers/numbers.service";
-import { useContracts } from "@/app/hooks/useContracts";
-import { useSuspenseQuery } from "@apollo/client";
-import { Card } from "@components/_shared";
 import { useMemo } from "react";
 import { formatUnits } from "viem";
-import { useBlockNumber, useChainId, useReadContract } from "wagmi";
+import { useBlockNumber } from "wagmi";
+import { Card } from "@/components/_shared";
+import useLockingContract from "@/lib/contracts/locking/useLockingContract";
+import useGetProposals from "@/lib/contracts/governor/useGetProposals";
 
 const ProposalSummaryComponent = () => {
-  const chainId = useChainId();
-  const contracts = useContracts();
-  const { data } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposals, {
-    context: {
-      apiName: chainId === 44787 ? "subgraphAlfajores" : "subgraph",
-    },
-  });
-
-  const { data: totalSupply } = useReadContract({
-    address: contracts.Locking.address,
-    abi: LockingABI,
-    functionName: "totalSupply",
-    args: [],
-  });
-  const {
-    data: { locks },
-  } = useSuspenseQuery<{ locks: Lock[] }>(GetAllLocks);
-  const { data: currentWeek } = useReadContract({
-    address: contracts.Locking.address,
-    abi: LockingABI,
-    functionName: "getWeek",
-    args: [],
-  });
+  const { totalSupply, locks, currentWeek } = useLockingContract();
+  const { proposals } = useGetProposals();
 
   const currentBlockNumber = useBlockNumber();
 
-  const proposalsEndBlocks: Array<BigInt> = data?.proposals.map(
+  const proposalsEndBlocks: Array<BigInt> = proposals.map(
     (proposal) => proposal.endBlock,
   );
 
@@ -52,7 +28,7 @@ const ProposalSummaryComponent = () => {
   }, [proposalsEndBlocks, currentBlockNumber]);
 
   const getTotalSupplyParsed = useMemo(() => {
-    return Number(formatUnits(totalSupply || 0n, 18)).toLocaleString();
+    return Number(formatUnits(totalSupply || BigInt(0), 18)).toLocaleString();
   }, [totalSupply]);
 
   const getActiveVoters = useMemo(() => {
diff --git a/src/components/proposals-list/proposals-list.component.tsx b/src/components/proposals-list/proposals-list.component.tsx
new file mode 100644
index 00000000..1a860706
--- /dev/null
+++ b/src/components/proposals-list/proposals-list.component.tsx
@@ -0,0 +1,106 @@
+import NumbersService from "@/lib/helpers/numbers.service";
+import StringService from "@/lib/helpers/string.service";
+import styles from "./proposals-list.module.scss";
+import { useProposalStates } from "@/lib/contracts/governor/useProposalStates";
+import BaseComponentProps from "@/lib/interfaces/base-component-props.interface";
+import classNames from "classnames";
+import { Card, ProgressBar, Status } from "@/components/_shared";
+import Link from "next/link";
+import { stateToStatusColorMap } from "@/lib/interfaces/proposal.interface";
+import { formatUnits } from "viem";
+import useGetProposals from "@/lib/contracts/governor/useGetProposals";
+
+interface ProposalsListProps extends BaseComponentProps {}
+
+export const ProposalsListComponent = ({
+  className,
+  style,
+}: ProposalsListProps) => {
+  const { proposals } = useGetProposals();
+
+  useProposalStates(proposals);
+
+  return (
+    <div
+      className={classNames(styles.wrapper, className, "font-fg")}
+      style={style}
+    >
+      <h2 className="text-center mt-x11 mb-x6 font-medium">Proposals</h2>
+      <Card block>
+        <div className={classNames(styles.proposals_grid, "text_small")}>
+          <div
+            className={classNames(
+              styles.proposals_grid__row,
+              styles.headers,
+              "font-inter",
+            )}
+          >
+            <div className={classNames(styles.header)}>Proposal name</div>
+            <div className={styles.header}>Status</div>
+            <div className={styles.header}>Votes in favor</div>
+            <div className={styles.header}>Votes against</div>
+            <div className={styles.header}>Total votes</div>
+          </div>
+          {proposals.map(({ proposalId, metadata, state, votes }, index) => (
+            <div key={index} className={classNames(styles.proposals_grid__row)}>
+              {!!index && <div className={styles.divider} />}
+              <div
+                className={classNames(
+                  styles.proposals_grid__row__element,
+                  styles.first,
+                )}
+              >
+                <div className="flex gap-x3 place-items-center">
+                  <Link
+                    className="flex-1"
+                    style={{ maxHeight: "3em" }}
+                    href={`/proposals/${proposalId}`}
+                  >
+                    <p>
+                      {StringService.limitLength(
+                        `${metadata?.title}`,
+                        75,
+                        true,
+                      )}
+                    </p>
+                  </Link>
+                </div>
+              </div>
+              <Status
+                text={state?.toString()}
+                type={stateToStatusColorMap[state]}
+              />
+              <div className={classNames(styles.proposals_grid__row__element)}>
+                <ProgressBar
+                  type="success"
+                  className={styles.progress_bar}
+                  current={Number(formatUnits(votes.for.total, 18))}
+                  max={Number(formatUnits(votes.total, 18))}
+                  valueFormat="alphabetic"
+                />
+              </div>
+              <div className={classNames(styles.proposals_grid__row__element)}>
+                <ProgressBar
+                  type="danger"
+                  className={styles.progress_bar}
+                  current={Number(formatUnits(votes.against.total, 18))}
+                  max={Number(formatUnits(votes.total, 18))}
+                  valueFormat="alphabetic"
+                />
+              </div>
+              <div
+                className={classNames(
+                  styles.proposals_grid__row__element,
+                  styles.last,
+                  "mb-3",
+                )}
+              >
+                {NumbersService.parseNumericValue(formatUnits(votes.total, 18))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+};
diff --git a/app/components/proposals-list/proposals-list.module.scss b/src/components/proposals-list/proposals-list.module.scss
similarity index 98%
rename from app/components/proposals-list/proposals-list.module.scss
rename to src/components/proposals-list/proposals-list.module.scss
index a4b9281b..0f603fff 100644
--- a/app/components/proposals-list/proposals-list.module.scss
+++ b/src/components/proposals-list/proposals-list.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .wrapper {
   width: 100%;
diff --git a/app/components/theme-switch/theme-switch.component.tsx b/src/components/theme-switch/theme-switch.component.tsx
similarity index 91%
rename from app/components/theme-switch/theme-switch.component.tsx
rename to src/components/theme-switch/theme-switch.component.tsx
index a67e037d..dbb2deaa 100644
--- a/app/components/theme-switch/theme-switch.component.tsx
+++ b/src/components/theme-switch/theme-switch.component.tsx
@@ -1,7 +1,7 @@
-import BaseComponentProps from "@interfaces/base-component-props.interface";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
-import { DarkModeIcon, LightModeIcon } from "@components/_icons";
+import { DarkModeIcon, LightModeIcon } from "@/components/_icons";
 import styles from "./theme-switch.module.scss";
 
 enum Mode {
diff --git a/app/components/theme-switch/theme-switch.module.scss b/src/components/theme-switch/theme-switch.module.scss
similarity index 96%
rename from app/components/theme-switch/theme-switch.module.scss
rename to src/components/theme-switch/theme-switch.module.scss
index e1761ec8..22e122ce 100644
--- a/app/components/theme-switch/theme-switch.module.scss
+++ b/src/components/theme-switch/theme-switch.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .switch {
   position: relative;
diff --git a/app/components/vote-cast-vote/cast-vote.tsx b/src/components/vote-cast-vote/cast-vote.tsx
similarity index 78%
rename from app/components/vote-cast-vote/cast-vote.tsx
rename to src/components/vote-cast-vote/cast-vote.tsx
index 064684e3..6551735e 100644
--- a/app/components/vote-cast-vote/cast-vote.tsx
+++ b/src/components/vote-cast-vote/cast-vote.tsx
@@ -2,25 +2,25 @@ import { useAccount } from "wagmi";
 
 import { UserRejectedRequestError } from "viem";
 
-import { Button, Card } from "@/app/components/_shared";
-import { ChevronIcon } from "@/app/components/_icons";
-import BlockExplorerLink from "@/app/components/_shared/block-explorer-link/block-explorer-link.component";
-
-import { Proposal } from "@/app/graphql";
-import { useChainState } from "@/app/providers/chainState.provider";
-import useVoteReceipt from "@/app/hooks/useVoteReceipt";
-import useCastVote from "@/app/hooks/useCastVote";
-
-import ErrorHelper from "@/app/helpers/error.helper";
-import { SuccessIcon } from "@/app/components/_icons/success-icon";
-import VotingCardTitle from "../_shared/vote-voting-card-title/voting-card-title";
+import { Button, Card } from "@/components/_shared";
+import { ChevronIcon } from "@/components/_icons";
+import BlockExplorerLink from "@/components/_shared/block-explorer-link/block-explorer-link.component";
+
+import { Proposal } from "@/lib/graphql";
+
+import ErrorHelper from "@/lib/helpers/error.helper";
+import { SuccessIcon } from "@/components/_icons/success-icon";
+import VotingCardTitle from "@/components/_shared/vote-voting-card-title/voting-card-title";
 import DisconnectedState from "./disconnected-state";
-import LoadingState from "../_shared/vote-loading-state/vote-loading-state";
+import LoadingState from "@/components/_shared/vote-loading-state/vote-loading-state";
 import VotingButtons from "./voting-buttons";
 import LockedBalance from "./locked-balance";
 
 import HasVoted from "./has-voted";
 import VoteConfirmation from "./vote-confirmation";
+import useTokens from "@/lib/contracts/useTokens";
+import useCastVote from "@/lib/contracts/governor/useCastVote";
+import useVoteReceipt from "@/lib/contracts/governor/useVoteReceipt";
 
 export const VOTE_TYPES = {
   Against: 0,
@@ -35,9 +35,8 @@ export const REVERSE_VOTE_TYPE_MAP = {
 } as const;
 
 const CastVote = ({ proposalId }: { proposalId: Proposal["proposalId"] }) => {
-  const { address, isConnected, isConnecting, isDisconnected } = useAccount();
-  const tokens = useChainState((s) => s.tokens);
-  const chainStateReady = useChainState((s) => s.ready);
+  const { address, isConnecting, isDisconnected } = useAccount();
+  const { veMentoBalance } = useTokens();
   const { data: voteReceipt, isLoading: isHasVotedStatusLoading } =
     useVoteReceipt({
       proposalId,
@@ -46,11 +45,8 @@ const CastVote = ({ proposalId }: { proposalId: Proposal["proposalId"] }) => {
 
   const vote = useCastVote();
 
-  const hasEnoughLockedMentoToVote = tokens.veMento.balance > 0;
-  const isInitializing =
-    isConnecting ||
-    (isConnected && !chainStateReady) ||
-    isHasVotedStatusLoading;
+  const hasEnoughLockedMentoToVote = veMentoBalance.value > 0;
+  const isInitializing = isConnecting || isHasVotedStatusLoading;
 
   const handleCastVote = (voteType: number) => {
     try {
diff --git a/app/components/vote-cast-vote/disconnected-state.tsx b/src/components/vote-cast-vote/disconnected-state.tsx
similarity index 66%
rename from app/components/vote-cast-vote/disconnected-state.tsx
rename to src/components/vote-cast-vote/disconnected-state.tsx
index 769171f0..03a91e3c 100644
--- a/app/components/vote-cast-vote/disconnected-state.tsx
+++ b/src/components/vote-cast-vote/disconnected-state.tsx
@@ -1,5 +1,5 @@
-import { Card, ConnectButton } from "../_shared";
-import VotingCardTitle from "../_shared/vote-voting-card-title/voting-card-title";
+import { Card, ConnectButton } from "@/components/_shared";
+import VotingCardTitle from "@/components/_shared/vote-voting-card-title/voting-card-title";
 
 const DisconnectedState = () => {
   return (
diff --git a/app/components/vote-cast-vote/has-voted.tsx b/src/components/vote-cast-vote/has-voted.tsx
similarity index 82%
rename from app/components/vote-cast-vote/has-voted.tsx
rename to src/components/vote-cast-vote/has-voted.tsx
index 6ef91e08..97ed8985 100644
--- a/app/components/vote-cast-vote/has-voted.tsx
+++ b/src/components/vote-cast-vote/has-voted.tsx
@@ -1,5 +1,5 @@
-import { Card } from "../_shared";
-import VotingCardTitle from "../_shared/vote-voting-card-title/voting-card-title";
+import { Card } from "@/components/_shared";
+import VotingCardTitle from "@/components/_shared/vote-voting-card-title/voting-card-title";
 import VoteTypePill from "./vote-type-pill";
 
 const HasVoted = ({ voteType }: { voteType: number }) => {
diff --git a/app/components/vote-cast-vote/locked-balance.tsx b/src/components/vote-cast-vote/locked-balance.tsx
similarity index 55%
rename from app/components/vote-cast-vote/locked-balance.tsx
rename to src/components/vote-cast-vote/locked-balance.tsx
index 496cb96f..a236915b 100644
--- a/app/components/vote-cast-vote/locked-balance.tsx
+++ b/src/components/vote-cast-vote/locked-balance.tsx
@@ -1,15 +1,15 @@
-import NumbersService from "@/app/helpers/numbers.service";
-import { useChainState } from "@/app/providers/chainState.provider";
 import { formatUnits } from "viem";
+import useTokens from "@/lib/contracts/useTokens";
+import NumbersService from "@/lib/helpers/numbers.service";
 
 const LockedBalance = () => {
-  const tokens = useChainState((s) => s.tokens);
+  const { veMentoBalance } = useTokens();
   return (
     <div className="flex flex-col gap-x2 items-center font-fg">
       <div className="text-[1.125rem] text-[#A8A8A8] dark:text-[#AAB3B6]">
         Your voting power
       </div>
-      <div className="text-[2rem] animate-[pulse] leading-[2rem]">{`${NumbersService.parseNumericValue(formatUnits(tokens.veMento.balance, tokens.veMento.decimals))} veMENTO`}</div>
+      <div className="text-[2rem] animate-[pulse] leading-[2rem]">{`${NumbersService.parseNumericValue(formatUnits(veMentoBalance.value, veMentoBalance.decimal))} veMENTO`}</div>
     </div>
   );
 };
diff --git a/app/components/vote-cast-vote/vote-confirmation.tsx b/src/components/vote-cast-vote/vote-confirmation.tsx
similarity index 83%
rename from app/components/vote-cast-vote/vote-confirmation.tsx
rename to src/components/vote-cast-vote/vote-confirmation.tsx
index 610fa2e5..8e75de63 100644
--- a/app/components/vote-cast-vote/vote-confirmation.tsx
+++ b/src/components/vote-cast-vote/vote-confirmation.tsx
@@ -1,8 +1,8 @@
-import WalletHelper from "@/app/helpers/wallet.helper";
-import { Card, Loader } from "../_shared";
-import VotingCardTitle from "../_shared/vote-voting-card-title/voting-card-title";
+import WalletHelper from "@/lib/helpers/wallet.helper";
+import { Card, Loader } from "@/components/_shared";
+import VotingCardTitle from "@/components/_shared/vote-voting-card-title/voting-card-title";
 import VoteTypePill from "./vote-type-pill";
-import { Proposal } from "@/app/graphql";
+import { Proposal } from "@/lib/graphql";
 
 const VoteConfirmation = ({
   voteType,
diff --git a/app/components/vote-cast-vote/vote-type-pill.tsx b/src/components/vote-cast-vote/vote-type-pill.tsx
similarity index 100%
rename from app/components/vote-cast-vote/vote-type-pill.tsx
rename to src/components/vote-cast-vote/vote-type-pill.tsx
diff --git a/app/components/vote-cast-vote/voting-buttons.tsx b/src/components/vote-cast-vote/voting-buttons.tsx
similarity index 100%
rename from app/components/vote-cast-vote/voting-buttons.tsx
rename to src/components/vote-cast-vote/voting-buttons.tsx
diff --git a/app/components/vote-inactive-proposal-status-message/inactive-proposal-status-message.tsx b/src/components/vote-inactive-proposal-status-message/inactive-proposal-status-message.tsx
similarity index 96%
rename from app/components/vote-inactive-proposal-status-message/inactive-proposal-status-message.tsx
rename to src/components/vote-inactive-proposal-status-message/inactive-proposal-status-message.tsx
index 00adfccb..2ae5c867 100644
--- a/app/components/vote-inactive-proposal-status-message/inactive-proposal-status-message.tsx
+++ b/src/components/vote-inactive-proposal-status-message/inactive-proposal-status-message.tsx
@@ -1,6 +1,6 @@
-import { ProposalState } from "@/app/graphql";
+import { ProposalState } from "@/lib/graphql";
 import React from "react";
-import { Card } from "../_shared";
+import { Card } from "@/components/_shared";
 
 const exploreLaterMessage =
   "Please explore other proposals to participate in the Mento ecosystem!";
diff --git a/app/components/votes-list/votes-list.component.tsx b/src/components/votes-list/votes-list.component.tsx
similarity index 79%
rename from app/components/votes-list/votes-list.component.tsx
rename to src/components/votes-list/votes-list.component.tsx
index cc836948..514bdac0 100644
--- a/app/components/votes-list/votes-list.component.tsx
+++ b/src/components/votes-list/votes-list.component.tsx
@@ -1,8 +1,8 @@
-import type { Participant, ProposalVotes } from "@/app/graphql";
-import { Avatar } from "@components/_shared";
-import { WalletAddress } from "@components/wallet-address/wallet-address.component";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import type { IVoteType } from "@interfaces/vote.interface";
+import type { Participant, ProposalVotes } from "@/lib/graphql";
+import { Avatar } from "@/components/_shared";
+import { WalletAddress } from "@/components/wallet-address/wallet-address.component";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import type { IVoteType } from "@/interfaces/vote.interface";
 import classNames from "classnames";
 import { formatUnits } from "viem";
 import styles from "./votes-list.module.scss";
diff --git a/app/components/votes-list/votes-list.module.scss b/src/components/votes-list/votes-list.module.scss
similarity index 95%
rename from app/components/votes-list/votes-list.module.scss
rename to src/components/votes-list/votes-list.module.scss
index 9770a819..ff7fa281 100644
--- a/app/components/votes-list/votes-list.module.scss
+++ b/src/components/votes-list/votes-list.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .list {
   .header {
diff --git a/app/components/wallet-address/wallet-address.component.tsx b/src/components/wallet-address/wallet-address.component.tsx
similarity index 51%
rename from app/components/wallet-address/wallet-address.component.tsx
rename to src/components/wallet-address/wallet-address.component.tsx
index 388e035f..6aa0a7ae 100644
--- a/app/components/wallet-address/wallet-address.component.tsx
+++ b/src/components/wallet-address/wallet-address.component.tsx
@@ -1,6 +1,6 @@
-import WalletHelper from "@/app/helpers/wallet.helper";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import BlockExplorerLink from "../_shared/block-explorer-link/block-explorer-link.component";
+import BaseComponentProps from "@/interfaces/base-component-props.interface";
+import BlockExplorerLink from "@/components/_shared/block-explorer-link/block-explorer-link.component";
+import { centerEllipsis } from "@/lib/helpers/string.service";
 
 interface WalletAddressProps extends BaseComponentProps {
   address: string;
@@ -11,11 +11,10 @@ export const WalletAddress = ({
   className,
   style,
 }: WalletAddressProps) => {
-  const shortAddress = WalletHelper.getShortAddress(address);
   return (
     <div className={className} style={style}>
       <BlockExplorerLink type="address" item={address}>
-        {shortAddress}
+        {centerEllipsis(address)}
       </BlockExplorerLink>
     </div>
   );
diff --git a/app/helpers/chains.ts b/src/config/chains.ts
similarity index 90%
rename from app/helpers/chains.ts
rename to src/config/chains.ts
index 85f32be5..27552425 100644
--- a/app/helpers/chains.ts
+++ b/src/config/chains.ts
@@ -1,9 +1,9 @@
 import { addresses, ContractAddresses } from "@mento-protocol/mento-sdk";
-import { Address } from "viem";
+import { Address, defineChain } from "viem";
 import { celo, celoAlfajores } from "viem/chains";
-import { MentoChain, MentoChainContracts } from "../types";
+import { MentoChain, MentoChainContracts } from "@/lib/types";
 
-export const Celo: MentoChain = {
+export const Celo: MentoChain = defineChain({
   ...celo,
   blockExplorers: {
     default: {
@@ -16,9 +16,9 @@ export const Celo: MentoChain = {
     ...celo.contracts,
     ...transformToChainContracts(addresses[celo.id]),
   },
-};
+});
 
-export const Alfajores: MentoChain = {
+export const Alfajores: MentoChain = defineChain({
   ...celoAlfajores,
   blockExplorers: {
     default: {
@@ -48,7 +48,7 @@ export const Alfajores: MentoChain = {
       address: "0xc88f553DC20fc78ce554bfF97C2F4a4E5BDB0134",
     },
   },
-};
+});
 
 /**
  * Transforms the specified Mento contract addresses to the format used by Viem.
diff --git a/app/helpers/Valora.wallet.ts b/src/config/valora.wallet.ts
similarity index 100%
rename from app/helpers/Valora.wallet.ts
rename to src/config/valora.wallet.ts
diff --git a/app/helpers/wagmi.config.ts b/src/config/wagmi.config.ts
similarity index 88%
rename from app/helpers/wagmi.config.ts
rename to src/config/wagmi.config.ts
index 3f688d1c..f5ddcc90 100644
--- a/app/helpers/wagmi.config.ts
+++ b/src/config/wagmi.config.ts
@@ -1,4 +1,4 @@
-import { Alfajores, Celo } from "@/app/helpers/chains";
+import { Alfajores, Celo } from "@/config/chains";
 import { connectorsForWallets } from "@rainbow-me/rainbowkit";
 import {
   metaMaskWallet,
@@ -7,7 +7,7 @@ import {
   walletConnectWallet,
 } from "@rainbow-me/rainbowkit/wallets";
 import { createConfig, http } from "wagmi";
-import { valora } from "./Valora.wallet";
+import { valora } from "@/config/valora.wallet";
 
 const connectors = connectorsForWallets(
   [
diff --git a/app/abis/Governor.ts b/src/lib/abi/Governor.ts
similarity index 100%
rename from app/abis/Governor.ts
rename to src/lib/abi/Governor.ts
diff --git a/app/abis/Locking.ts b/src/lib/abi/Locking.ts
similarity index 100%
rename from app/abis/Locking.ts
rename to src/lib/abi/Locking.ts
diff --git a/app/abis/TimelockController.ts b/src/lib/abi/TimelockController.ts
similarity index 100%
rename from app/abis/TimelockController.ts
rename to src/lib/abi/TimelockController.ts
diff --git a/app/hooks/useCastVote.ts b/src/lib/contracts/governor/useCastVote.ts
similarity index 52%
rename from app/hooks/useCastVote.ts
rename to src/lib/contracts/governor/useCastVote.ts
index 21a26bfe..c322396d 100644
--- a/app/hooks/useCastVote.ts
+++ b/src/lib/contracts/governor/useCastVote.ts
@@ -1,6 +1,7 @@
+import { useCallback } from "react";
 import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
-import { useContracts } from "@/app/hooks/useContracts";
-import { GovernorABI } from "../abis/Governor";
+import { useContracts } from "@/lib/contracts/useContracts";
+import { GovernorABI } from "@/lib/abi/Governor";
 
 const useCastVote = () => {
   const contracts = useContracts();
@@ -15,16 +16,17 @@ const useCastVote = () => {
       hash: data,
     });
 
-  const castVote = (proposalId: number, support: number) => {
-    const params = {
-      address: contracts.MentoGovernor.address,
-      abi: GovernorABI,
-      functionName: "castVote",
-      args: [BigInt(proposalId).valueOf(), support],
-    } as const;
-
-    writeContract(params);
-  };
+  const castVote = useCallback(
+    (proposalId: number, support: number) => {
+      writeContract({
+        address: contracts.MentoGovernor.address,
+        abi: GovernorABI,
+        functionName: "castVote",
+        args: [BigInt(proposalId).valueOf(), support],
+      });
+    },
+    [contracts.MentoGovernor.address, writeContract],
+  );
 
   return {
     hash: data,
diff --git a/src/lib/contracts/governor/useCreateProposalOnChain.ts b/src/lib/contracts/governor/useCreateProposalOnChain.ts
new file mode 100644
index 00000000..b5696d1b
--- /dev/null
+++ b/src/lib/contracts/governor/useCreateProposalOnChain.ts
@@ -0,0 +1,47 @@
+import { GovernorABI } from "@/lib/abi/Governor";
+import { useContracts } from "@/lib/contracts/useContracts";
+import { useCallback } from "react";
+import { Address, toHex } from "viem";
+import { useWriteContract } from "wagmi";
+
+export type ProposalCreateParams = {
+  metadata: { title: string; description: string };
+  transactions: Array<{
+    address: string;
+    value: string | number;
+    data: string;
+  }>;
+};
+
+const useCreateProposalOnChain = () => {
+  const { data, error, writeContract, isSuccess } = useWriteContract();
+  const { MentoGovernor } = useContracts();
+
+  const createProposal = useCallback(
+    (proposal: ProposalCreateParams) => {
+      writeContract({
+        address: MentoGovernor.address as Address,
+        abi: GovernorABI,
+        functionName: "propose",
+        args: [
+          proposal.transactions.map(
+            (transaction) => transaction.address as Address,
+          ),
+          proposal.transactions.map((transaction) => BigInt(transaction.value)),
+          proposal.transactions.map((transaction) => toHex(transaction.data)), // TODO: Confirm this doesn't need toBytes first
+          JSON.stringify(proposal.metadata),
+        ],
+      });
+    },
+    [writeContract, MentoGovernor.address],
+  );
+
+  return {
+    createProposal,
+    createError: error,
+    createTx: data,
+    isSuccess,
+  };
+};
+
+export default useCreateProposalOnChain;
diff --git a/src/lib/contracts/governor/useGetProposals.ts b/src/lib/contracts/governor/useGetProposals.ts
new file mode 100644
index 00000000..6cf2dcc0
--- /dev/null
+++ b/src/lib/contracts/governor/useGetProposals.ts
@@ -0,0 +1,22 @@
+import { useSuspenseQuery } from "@apollo/client";
+import { GetProposals, Proposal } from "@/lib/graphql";
+import { useChainId } from "wagmi";
+
+const useGetProposals = () => {
+  const chainId = useChainId();
+  const {
+    data: { proposals },
+  } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposals, {
+    context: {
+      apiName: chainId === 44787 ? "subgraphAlfajores" : "subgraph",
+    },
+    queryKey: "governor-contract-hook",
+    refetchWritePolicy: "overwrite",
+  });
+
+  return {
+    proposals,
+  };
+};
+
+export default useGetProposals;
diff --git a/app/hooks/useProposalStates.ts b/src/lib/contracts/governor/useProposalStates.ts
similarity index 87%
rename from app/hooks/useProposalStates.ts
rename to src/lib/contracts/governor/useProposalStates.ts
index 08acf12c..e8f1b562 100644
--- a/app/hooks/useProposalStates.ts
+++ b/src/lib/contracts/governor/useProposalStates.ts
@@ -1,6 +1,6 @@
 /**
- * Proposal States are a bit tricky to com epute from the data we get from the graph.
- * This is because the state dependes both on the Proposal and the TimelockOperation.
+ * Proposal States are a bit tricky to compute from the data we get from the graph.
+ * This is because the state depends both on the Proposal and the TimelockOperation.
  * These are as follows:
  * Pending: Proposal is created but startBlock > block.now
  * Active: startBlock <= block.now
@@ -18,12 +18,12 @@
  * See https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/#storing-local-state-in-reactive-variables
  */
 
-import { GovernorABI } from "@/app/abis/Governor";
-import { Proposal, ProposalState, Scalars } from "@/app/graphql";
+import { GovernorABI } from "@/lib/abi/Governor";
+import { Proposal, ProposalState, Scalars } from "@/lib/graphql";
 import { makeVar } from "@apollo/client/cache";
 import { useEffect } from "react";
 import { useReadContracts } from "wagmi";
-import { useContracts } from "./useContracts";
+import { useContracts } from "@/lib/contracts/useContracts";
 
 type ProposalID = Scalars["ID"]["output"];
 type ProposalToState = Record<ProposalID, ProposalState>;
@@ -57,6 +57,9 @@ export const useProposalStates = (
       functionName: "state",
       args: [proposal.proposalId],
     })),
+    query: {
+      refetchInterval: 5000,
+    },
   });
 
   useEffect(() => {
diff --git a/app/hooks/useVoteReceipt.ts b/src/lib/contracts/governor/useVoteReceipt.ts
similarity index 75%
rename from app/hooks/useVoteReceipt.ts
rename to src/lib/contracts/governor/useVoteReceipt.ts
index 4e8451cc..ae36e99e 100644
--- a/app/hooks/useVoteReceipt.ts
+++ b/src/lib/contracts/governor/useVoteReceipt.ts
@@ -1,8 +1,8 @@
 import { useReadContract } from "wagmi";
 import { Address } from "viem";
-import { GovernorABI } from "@/app/abis/Governor";
-import { Proposal } from "@/app/graphql";
-import { useContracts } from "@/app/hooks/useContracts";
+import { GovernorABI } from "@/lib/abi/Governor";
+import { Proposal } from "@/lib/graphql";
+import { useContracts } from "@/lib/contracts/useContracts";
 
 const useVoteReceipt = ({
   address,
diff --git a/src/lib/contracts/locking/useLockMento.ts b/src/lib/contracts/locking/useLockMento.ts
new file mode 100644
index 00000000..56d09b1e
--- /dev/null
+++ b/src/lib/contracts/locking/useLockMento.ts
@@ -0,0 +1,47 @@
+import { useCallback } from "react";
+import { useContracts } from "@/lib/contracts/useContracts";
+import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { LockingABI } from "@/lib/abi/Locking";
+import { Address } from "viem";
+
+const useLockMento = () => {
+  const contracts = useContracts();
+  const {
+    writeContract,
+    isPending: isAwaitingUserSignature,
+    data,
+    ...restWrite
+  } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash: data,
+    });
+  const lockMento = useCallback(
+    (
+      account: Address,
+      delegate: Address,
+      amount: number,
+      slope: number,
+      cliff: number,
+    ) => {
+      writeContract({
+        address: contracts.Locking.address,
+        abi: LockingABI,
+        functionName: "lock",
+        args: [account, delegate, BigInt(amount), slope, cliff],
+      });
+    },
+    [contracts.Locking.address, writeContract],
+  );
+
+  return {
+    hash: data,
+    lockMento,
+    isAwaitingUserSignature,
+    isConfirming,
+    isConfirmed,
+    ...restWrite,
+  };
+};
+
+export default useLockMento;
diff --git a/src/lib/contracts/locking/useLockingContract.ts b/src/lib/contracts/locking/useLockingContract.ts
new file mode 100644
index 00000000..82edca96
--- /dev/null
+++ b/src/lib/contracts/locking/useLockingContract.ts
@@ -0,0 +1,45 @@
+import { useContracts } from "@/lib/contracts/useContracts";
+import { useReadContract } from "wagmi";
+import { LockingABI } from "@/lib/abi/Locking";
+import { useSuspenseQuery } from "@apollo/client";
+import { GetAllLocks, Lock } from "@/lib/graphql";
+
+const useLockingContract = () => {
+  const contracts = useContracts();
+  const {
+    data: { locks },
+  } = useSuspenseQuery<{ locks: Lock[] }>(GetAllLocks, {
+    queryKey: "locking-contract-hook",
+    refetchWritePolicy: "overwrite",
+  });
+
+  const { data: totalSupply } = useReadContract({
+    address: contracts.Locking.address,
+    abi: LockingABI,
+    functionName: "totalSupply",
+    args: [],
+    query: {
+      refetchOnReconnect: true,
+      initialData: 0n,
+    },
+  });
+
+  const { data: currentWeek } = useReadContract({
+    address: contracts.Locking.address,
+    abi: LockingABI,
+    functionName: "getWeek",
+    args: [],
+    query: {
+      refetchOnReconnect: true,
+      initialData: 0n,
+    },
+  });
+
+  return {
+    totalSupply,
+    locks,
+    currentWeek,
+  };
+};
+
+export default useLockingContract;
diff --git a/app/hooks/useContracts.ts b/src/lib/contracts/useContracts.ts
similarity index 80%
rename from app/hooks/useContracts.ts
rename to src/lib/contracts/useContracts.ts
index df12862b..93b36aac 100644
--- a/app/hooks/useContracts.ts
+++ b/src/lib/contracts/useContracts.ts
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useChainId, useConfig } from "wagmi";
-import { MentoChain, MentoChainContracts } from "../types";
-import { Celo } from "../helpers/chains";
+import { MentoChain, MentoChainContracts } from "@/lib/types";
+import { Celo } from "@/config/chains";
 
 export const useContracts = (): MentoChainContracts => {
   const config = useConfig();
diff --git a/src/lib/contracts/useTokens.ts b/src/lib/contracts/useTokens.ts
new file mode 100644
index 00000000..6e603ed2
--- /dev/null
+++ b/src/lib/contracts/useTokens.ts
@@ -0,0 +1,59 @@
+import { useAccount, useBalance } from "wagmi";
+import { useContracts } from "@/lib/contracts/useContracts";
+import { useCallback } from "react";
+
+export type TokenBalance = {
+  decimal: number;
+  value: bigint;
+  symbol: string;
+  formatted: string;
+};
+
+export const useTokens = () => {
+  const { Locking, MentoToken } = useContracts();
+  const { isConnected } = useAccount();
+
+  const { data: veMentoBalance, refetch: veMentoRefetch } = useBalance({
+    address: Locking.address,
+    scopeKey: "token-hook",
+    query: {
+      refetchInterval: 5000,
+      enabled: isConnected,
+      initialData: {
+        decimals: 18,
+        formatted: "0",
+        symbol: "veMENTO",
+        value: 0n,
+      },
+    },
+  });
+
+  const { data: mentoBalance, refetch: mentoRefetch } = useBalance({
+    address: MentoToken.address,
+    scopeKey: "token-hook",
+    query: {
+      refetchInterval: 5000,
+      enabled: isConnected,
+      initialData: {
+        decimals: 18,
+        formatted: "0",
+        symbol: "MENTO",
+        value: 0n,
+      },
+    },
+  });
+
+  const refreshTokens = useCallback(() => {
+    veMentoRefetch();
+    mentoRefetch();
+  }, [mentoRefetch, veMentoRefetch]);
+
+  // This type conversion is needed for TS, but due to the initial data settings, this should never be undefined
+  return {
+    veMentoBalance: veMentoBalance as unknown as TokenBalance,
+    mentoBalance: mentoBalance as unknown as TokenBalance,
+    refreshTokens,
+  };
+};
+
+export default useTokens;
diff --git a/app/graphql/README.md b/src/lib/graphql/README.md
similarity index 100%
rename from app/graphql/README.md
rename to src/lib/graphql/README.md
diff --git a/app/graphql/apollo.client.ts b/src/lib/graphql/apollo.client.ts
similarity index 96%
rename from app/graphql/apollo.client.ts
rename to src/lib/graphql/apollo.client.ts
index 644b5717..2c78d5b3 100644
--- a/app/graphql/apollo.client.ts
+++ b/src/lib/graphql/apollo.client.ts
@@ -7,7 +7,7 @@ import {
   NextSSRInMemoryCache,
   SSRMultipartLink,
 } from "@apollo/experimental-nextjs-app-support/ssr";
-import loadEnvVar from "../helpers/load-env-var";
+import loadEnvVar from "@/lib/helpers/load-env-var";
 import { ProposalPolicy } from "./subgraph/policies/Proposal";
 
 const CELO_EXPLORER_API_URL = loadEnvVar(
@@ -23,7 +23,7 @@ const SUBGRAPH_URL_ALFAJORES = loadEnvVar(
 );
 
 // have a function to create a client for you
-export function newApolloClient() {
+export function makeClient() {
   const httpLink = createHttpLink({
     // needs to be an absolute url, as relative urls cannot be used in SSR
     uri: (operation) => {
diff --git a/app/graphql/celo-explorer/generated/fragment-masking.ts b/src/lib/graphql/celo-explorer/generated/fragment-masking.ts
similarity index 100%
rename from app/graphql/celo-explorer/generated/fragment-masking.ts
rename to src/lib/graphql/celo-explorer/generated/fragment-masking.ts
diff --git a/app/graphql/celo-explorer/generated/gql.ts b/src/lib/graphql/celo-explorer/generated/gql.ts
similarity index 100%
rename from app/graphql/celo-explorer/generated/gql.ts
rename to src/lib/graphql/celo-explorer/generated/gql.ts
diff --git a/app/graphql/celo-explorer/generated/graphql.ts b/src/lib/graphql/celo-explorer/generated/graphql.ts
similarity index 100%
rename from app/graphql/celo-explorer/generated/graphql.ts
rename to src/lib/graphql/celo-explorer/generated/graphql.ts
diff --git a/app/graphql/celo-explorer/generated/index.ts b/src/lib/graphql/celo-explorer/generated/index.ts
similarity index 61%
rename from app/graphql/celo-explorer/generated/index.ts
rename to src/lib/graphql/celo-explorer/generated/index.ts
index f5159916..0ea4a91c 100644
--- a/app/graphql/celo-explorer/generated/index.ts
+++ b/src/lib/graphql/celo-explorer/generated/index.ts
@@ -1,2 +1,2 @@
 export * from "./fragment-masking";
-export * from "./gql";
\ No newline at end of file
+export * from "./gql";
diff --git a/app/graphql/celo-explorer/queries/getContractsInfo.graphql b/src/lib/graphql/celo-explorer/queries/getContractsInfo.graphql
similarity index 100%
rename from app/graphql/celo-explorer/queries/getContractsInfo.graphql
rename to src/lib/graphql/celo-explorer/queries/getContractsInfo.graphql
diff --git a/app/graphql/index.ts b/src/lib/graphql/index.ts
similarity index 100%
rename from app/graphql/index.ts
rename to src/lib/graphql/index.ts
diff --git a/app/graphql/subgraph/fragments/proposalFields.graphql b/src/lib/graphql/subgraph/fragments/proposalFields.graphql
similarity index 100%
rename from app/graphql/subgraph/fragments/proposalFields.graphql
rename to src/lib/graphql/subgraph/fragments/proposalFields.graphql
diff --git a/app/graphql/subgraph/generated/fragment-masking.ts b/src/lib/graphql/subgraph/generated/fragment-masking.ts
similarity index 100%
rename from app/graphql/subgraph/generated/fragment-masking.ts
rename to src/lib/graphql/subgraph/generated/fragment-masking.ts
diff --git a/app/graphql/subgraph/generated/gql.ts b/src/lib/graphql/subgraph/generated/gql.ts
similarity index 100%
rename from app/graphql/subgraph/generated/gql.ts
rename to src/lib/graphql/subgraph/generated/gql.ts
diff --git a/app/graphql/subgraph/generated/graphql.ts b/src/lib/graphql/subgraph/generated/graphql.ts
similarity index 100%
rename from app/graphql/subgraph/generated/graphql.ts
rename to src/lib/graphql/subgraph/generated/graphql.ts
diff --git a/app/graphql/subgraph/generated/index.ts b/src/lib/graphql/subgraph/generated/index.ts
similarity index 61%
rename from app/graphql/subgraph/generated/index.ts
rename to src/lib/graphql/subgraph/generated/index.ts
index f5159916..0ea4a91c 100644
--- a/app/graphql/subgraph/generated/index.ts
+++ b/src/lib/graphql/subgraph/generated/index.ts
@@ -1,2 +1,2 @@
 export * from "./fragment-masking";
-export * from "./gql";
\ No newline at end of file
+export * from "./gql";
diff --git a/app/graphql/subgraph/policies/Proposal.ts b/src/lib/graphql/subgraph/policies/Proposal.ts
similarity index 97%
rename from app/graphql/subgraph/policies/Proposal.ts
rename to src/lib/graphql/subgraph/policies/Proposal.ts
index 348e1f25..393ce6db 100644
--- a/app/graphql/subgraph/policies/Proposal.ts
+++ b/src/lib/graphql/subgraph/policies/Proposal.ts
@@ -1,6 +1,5 @@
-import { proposalToStateVar } from "@/app/hooks/useProposalStates";
-import type { TypePolicy } from "@apollo/client/cache";
 import type { Address } from "viem";
+import type { TypePolicy } from "@apollo/client/cache";
 import {
   Account,
   ProposalState,
@@ -8,6 +7,7 @@ import {
   ProposalVotes,
   VoteCast,
 } from "../generated/graphql";
+import { proposalToStateVar } from "@/lib/contracts/governor/useProposalStates";
 
 export const ProposalPolicy: TypePolicy = {
   fields: {
diff --git a/app/graphql/subgraph/queries/getAllLocks.graphql b/src/lib/graphql/subgraph/queries/getAllLocks.graphql
similarity index 100%
rename from app/graphql/subgraph/queries/getAllLocks.graphql
rename to src/lib/graphql/subgraph/queries/getAllLocks.graphql
diff --git a/app/graphql/subgraph/queries/getLocks.graphql b/src/lib/graphql/subgraph/queries/getLocks.graphql
similarity index 100%
rename from app/graphql/subgraph/queries/getLocks.graphql
rename to src/lib/graphql/subgraph/queries/getLocks.graphql
diff --git a/app/graphql/subgraph/queries/getProposal.graphql b/src/lib/graphql/subgraph/queries/getProposal.graphql
similarity index 100%
rename from app/graphql/subgraph/queries/getProposal.graphql
rename to src/lib/graphql/subgraph/queries/getProposal.graphql
diff --git a/app/graphql/subgraph/queries/getProposals.graphql b/src/lib/graphql/subgraph/queries/getProposals.graphql
similarity index 100%
rename from app/graphql/subgraph/queries/getProposals.graphql
rename to src/lib/graphql/subgraph/queries/getProposals.graphql
diff --git a/app/helpers/error.helper.ts b/src/lib/helpers/error.helper.ts
similarity index 100%
rename from app/helpers/error.helper.ts
rename to src/lib/helpers/error.helper.ts
diff --git a/app/helpers/load-env-var.ts b/src/lib/helpers/load-env-var.ts
similarity index 100%
rename from app/helpers/load-env-var.ts
rename to src/lib/helpers/load-env-var.ts
diff --git a/app/helpers/numbers.service.ts b/src/lib/helpers/numbers.service.ts
similarity index 100%
rename from app/helpers/numbers.service.ts
rename to src/lib/helpers/numbers.service.ts
diff --git a/app/helpers/routing.map.ts b/src/lib/helpers/routing.map.ts
similarity index 100%
rename from app/helpers/routing.map.ts
rename to src/lib/helpers/routing.map.ts
diff --git a/app/helpers/string.service.ts b/src/lib/helpers/string.service.ts
similarity index 52%
rename from app/helpers/string.service.ts
rename to src/lib/helpers/string.service.ts
index a33c8495..bf9b1a83 100644
--- a/app/helpers/string.service.ts
+++ b/src/lib/helpers/string.service.ts
@@ -9,3 +9,12 @@ export default abstract class StringService {
       : value;
   }
 }
+
+export const centerEllipsis = (address: string, remaining = 6) => {
+  if (address.length <= remaining * 2) {
+    return address;
+  }
+  return `${address.substring(0, remaining)}...${address.substring(
+    address.length - remaining,
+  )}`;
+};
diff --git a/app/helpers/wallet.helper.ts b/src/lib/helpers/wallet.helper.ts
similarity index 100%
rename from app/helpers/wallet.helper.ts
rename to src/lib/helpers/wallet.helper.ts
diff --git a/app/hooks/useOutsideAlerter.ts b/src/lib/hooks/useOutsideAlerter.ts
similarity index 100%
rename from app/hooks/useOutsideAlerter.ts
rename to src/lib/hooks/useOutsideAlerter.ts
diff --git a/app/interfaces/base-component-props.interface.ts b/src/lib/interfaces/base-component-props.interface.ts
similarity index 63%
rename from app/interfaces/base-component-props.interface.ts
rename to src/lib/interfaces/base-component-props.interface.ts
index 61ecc1e1..323ccc66 100644
--- a/app/interfaces/base-component-props.interface.ts
+++ b/src/lib/interfaces/base-component-props.interface.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, MutableRefObject, ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 export default interface BaseComponentProps {
   className?: string;
diff --git a/app/interfaces/base-icon-props.interface.ts b/src/lib/interfaces/base-icon-props.interface.ts
similarity index 100%
rename from app/interfaces/base-icon-props.interface.ts
rename to src/lib/interfaces/base-icon-props.interface.ts
diff --git a/app/interfaces/base-input-props.interface.ts b/src/lib/interfaces/base-input-props.interface.ts
similarity index 100%
rename from app/interfaces/base-input-props.interface.ts
rename to src/lib/interfaces/base-input-props.interface.ts
diff --git a/app/interfaces/lock.interface.ts b/src/lib/interfaces/lock.interface.ts
similarity index 100%
rename from app/interfaces/lock.interface.ts
rename to src/lib/interfaces/lock.interface.ts
diff --git a/app/interfaces/proposal.interface.ts b/src/lib/interfaces/proposal.interface.ts
similarity index 82%
rename from app/interfaces/proposal.interface.ts
rename to src/lib/interfaces/proposal.interface.ts
index 715fef06..a4e56f03 100644
--- a/app/interfaces/proposal.interface.ts
+++ b/src/lib/interfaces/proposal.interface.ts
@@ -1,5 +1,5 @@
-import { BadgeType } from "@/app/types";
-import { ProposalState } from "@/app/graphql";
+import { BadgeType } from "@/lib/types";
+import { ProposalState } from "@/lib/graphql";
 
 export const stateToStatusColorMap: Record<ProposalState, BadgeType> = {
   [ProposalState.Active]: "info",
diff --git a/app/interfaces/vote.interface.ts b/src/lib/interfaces/vote.interface.ts
similarity index 100%
rename from app/interfaces/vote.interface.ts
rename to src/lib/interfaces/vote.interface.ts
diff --git a/app/providers/modal.provider.tsx b/src/lib/providers/modal.provider.tsx
similarity index 95%
rename from app/providers/modal.provider.tsx
rename to src/lib/providers/modal.provider.tsx
index bfa55139..ed17cd87 100644
--- a/app/providers/modal.provider.tsx
+++ b/src/lib/providers/modal.provider.tsx
@@ -1,6 +1,6 @@
 import { createContext, ReactNode, useContext, useState } from "react";
-import modalStyles from "@styles/modal.module.scss";
-import { Button, Card } from "@components/_shared";
+import modalStyles from "@/styles/modal.module.scss";
+import { Button, Card } from "@/components/_shared";
 import classNames from "classnames";
 
 interface ModalProviderProps {
@@ -89,7 +89,7 @@ const ModalWrapper = ({
         >
           <Card.Header className="relative !pb-x6">
             <div className="font-semibold">
-              {options?.title || (!!question ? "Confirm" : " ")}
+              {options?.title || (question ? "Confirm" : " ")}
             </div>
             <div className={modalStyles.modal__close} onClick={close}>
               X
@@ -135,7 +135,6 @@ export const ModalProvider = ({ children }: ModalProviderProps) => {
     isQuestion: boolean,
     options?: Partial<ModalOptions>,
   ) => {
-    const id = Math.random().toString(36).substring(7);
     return new Promise<boolean>((resolve) => {
       const confirm = () => {
         removeModal();
diff --git a/app/types/index.ts b/src/lib/types/index.ts
similarity index 100%
rename from app/types/index.ts
rename to src/lib/types/index.ts
diff --git a/app/brand.scss b/src/styles/brand.scss
similarity index 98%
rename from app/brand.scss
rename to src/styles/brand.scss
index 952015a9..3f7255a8 100644
--- a/app/brand.scss
+++ b/src/styles/brand.scss
@@ -1,5 +1,5 @@
-@import "styles/variables.module";
-@import "styles/easing.module";
+@import "@/styles/variables.module";
+@import "@/styles/easing.module";
 
 $brandColors: (
   'black': $c-black,
diff --git a/app/styles/easing.module.scss b/src/styles/easing.module.scss
similarity index 100%
rename from app/styles/easing.module.scss
rename to src/styles/easing.module.scss
diff --git a/app/styles/exports.module.scss b/src/styles/exports.module.scss
similarity index 100%
rename from app/styles/exports.module.scss
rename to src/styles/exports.module.scss
diff --git a/app/globals.scss b/src/styles/globals.scss
similarity index 100%
rename from app/globals.scss
rename to src/styles/globals.scss
diff --git a/app/styles/modal.module.scss b/src/styles/modal.module.scss
similarity index 97%
rename from app/styles/modal.module.scss
rename to src/styles/modal.module.scss
index 5f63e267..90765bbd 100644
--- a/app/styles/modal.module.scss
+++ b/src/styles/modal.module.scss
@@ -1,4 +1,4 @@
-@import "@/app/brand";
+@import "@/styles/brand";
 
 .backdrop {
   @include default-backdrop;
diff --git a/app/styles/variables.module.scss b/src/styles/variables.module.scss
similarity index 100%
rename from app/styles/variables.module.scss
rename to src/styles/variables.module.scss
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1a235bf2..de20a58a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,9 +2,8 @@ import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "/src/components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
diff --git a/tsconfig.json b/tsconfig.json
index 23cd7b49..562d7861 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,26 +18,36 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "noUnusedLocals": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
+      // "@/*": [
+      //   "./*"
+      // ],
+      "@/app/*": [
+        "./src/app/*"
       ],
-      "@components/*": [
-        "./app/components/*"
+      "@/components/*": [
+        "./src/components/*"
       ],
-      "@interfaces/*": [
-        "./app/interfaces/*"
+      "@/config/*": [
+        "./src/config/*"
       ],
-      "@types/*": [
-        "./app/types/*"
+      "@/lib/*": [
+        "./src/lib/*"
       ],
-      "@styles/*": [
-        "./app/styles/*"
+      "@/interfaces/*": [
+        "./src/lib/interfaces/*"
+      ],
+      "@/types/*": [
+        "./src/lib/types/*"
+      ],
+      "@/styles/*": [
+        "./src/styles/*"
       ]
     }
   },