From 61fba4ae0902298234e4358567be7ab55a4430c3 Mon Sep 17 00:00:00 2001
From: Aeron Park <21303012+AkydA@users.noreply.github.com>
Date: Mon, 26 Aug 2024 17:58:57 +0900
Subject: [PATCH] GSW-1508 Refactor governance (#513)

* refactor: move components

* remove: unused component

* remove: unused components

* refactor: clean import path
---
 packages/web/.env.example                     |   2 +-
 .../learn-more-modal/LearnMoreModal.spec.tsx  |  18 --
 .../LearnMoreModal.stories.tsx                |  18 --
 .../learn-more-modal/LearnMoreModal.styles.ts | 177 ------------------
 .../learn-more-modal/LearnMoreModal.tsx       | 172 -----------------
 .../GnoswapServiceProvider.tsx                |  51 ++---
 .../web/src/repositories/leaderboard/index.ts |   2 +
 .../web/src/repositories/liquidity/index.ts   |   3 -
 .../liquidity/liquidity-repository-mock.ts    |  28 ---
 .../liquidity/liquidity-repository.ts         |  18 --
 .../request/add-liquidity-request.ts          |  11 --
 .../liquidity/request/claim-reward-request.ts |   3 -
 .../repositories/liquidity/request/index.ts   |   3 -
 .../request/remove-liquidity-request.ts       |   3 -
 .../response/add-liquidity-response.ts        |   3 -
 .../response/claim-reward-response.ts         |   3 -
 .../repositories/liquidity/response/index.ts  |   6 -
 .../liquidity-detail-info-response.ts         |  31 ---
 .../liquidity-detail-list-response.ts         |  37 ----
 .../response/liquidity-reward-response.ts     |  25 ---
 .../response/remove-liquidity-response.ts     |   3 -
 packages/web/src/repositories/pool/index.ts   |   4 +-
 .../web/src/repositories/position/index.ts    |   2 +
 .../web/src/repositories/staking/index.ts     |   3 -
 .../src/repositories/staking/request/index.ts |   1 -
 .../staking/request/stake-request.ts          |   5 -
 .../staking/request/unstake-request.ts        |   3 -
 .../repositories/staking/response/index.ts    |   2 -
 .../staking/response/stake-response.ts        |   3 -
 .../staking/response/unstake-response.ts      |   3 -
 .../staking/staking-repository-mock.ts        |  17 --
 .../staking/staking-repository.ts             |   9 -
 packages/web/src/repositories/token/index.ts  |   1 +
 packages/web/src/repositories/wallet/index.ts |   2 +
 .../web/src/views/governance/Governance.tsx   |   4 +-
 .../src/views/governance/GovernanceLayout.tsx |  19 +-
 .../GovernanceSummary.spec.tsx                |   0
 .../GovernanceSummary.stories.tsx             |   0
 .../GovernanceSummary.styles.ts               |   0
 .../governance-summary/GovernanceSummary.tsx  |   7 +-
 .../GovernanceDetail.spec.tsx                 |   0
 .../GovernanceDetail.stories.tsx              |   0
 .../GovernanceDetail.styles.ts                |   0
 .../governance-detail/GovernanceDetail.tsx    |   6 +-
 .../GovernanceDetailInfo.spec.tsx             |   0
 .../GovernanceDetailInfo.stories.tsx          |   0
 .../GovernanceDetailInfo.styles.ts            |   0
 .../GovernanceDetailInfo.tsx                  |  15 +-
 .../proposals-list/ProposalList.spec.tsx      |   0
 .../proposals-list/ProposalList.styles.ts     |   0
 .../proposals-list/ProposalList.tsx           |  17 +-
 .../CreateProposalModal.spec.tsx              |   0
 .../CreateProposalModal.styles.ts             |   0
 .../CreateProposalModal.tsx                   |  31 +--
 .../proposal-detail/ProposalDetail.spec.tsx   |   0
 .../ProposalDetail.stories.tsx                |   0
 .../proposal-detail/ProposalDetail.styles.ts  |   0
 .../proposal-detail/ProposalDetail.tsx        |  20 +-
 .../ProposalDetailSekeleton.tsx               |   0
 .../proposal-header/ProposalHeader.spec.tsx   |   0
 .../ProposalHeader.stories.tsx                |   0
 .../proposal-header/ProposalHeader.styles.ts  |   0
 .../proposal-header/ProposalHeader.tsx        |   4 +-
 .../ViewProposalModal.spec.tsx                |   0
 .../ViewProposalModal.stories.tsx             |   0
 .../ViewProposalModal.styles.ts               |   0
 .../view-proposal-modal/ViewProposalModal.tsx |  34 ++--
 .../GovernanceContainer.tsx                   |  19 +-
 .../ProposalListContainer.tsx                 |   8 +-
 69 files changed, 125 insertions(+), 731 deletions(-)
 delete mode 100644 packages/web/src/components/governance/learn-more-modal/LearnMoreModal.spec.tsx
 delete mode 100644 packages/web/src/components/governance/learn-more-modal/LearnMoreModal.stories.tsx
 delete mode 100644 packages/web/src/components/governance/learn-more-modal/LearnMoreModal.styles.ts
 delete mode 100644 packages/web/src/components/governance/learn-more-modal/LearnMoreModal.tsx
 create mode 100644 packages/web/src/repositories/leaderboard/index.ts
 delete mode 100644 packages/web/src/repositories/liquidity/index.ts
 delete mode 100644 packages/web/src/repositories/liquidity/liquidity-repository-mock.ts
 delete mode 100644 packages/web/src/repositories/liquidity/liquidity-repository.ts
 delete mode 100644 packages/web/src/repositories/liquidity/request/add-liquidity-request.ts
 delete mode 100644 packages/web/src/repositories/liquidity/request/claim-reward-request.ts
 delete mode 100644 packages/web/src/repositories/liquidity/request/index.ts
 delete mode 100644 packages/web/src/repositories/liquidity/request/remove-liquidity-request.ts
 delete mode 100644 packages/web/src/repositories/liquidity/response/add-liquidity-response.ts
 delete mode 100644 packages/web/src/repositories/liquidity/response/claim-reward-response.ts
 delete mode 100644 packages/web/src/repositories/liquidity/response/index.ts
 delete mode 100644 packages/web/src/repositories/liquidity/response/liquidity-detail-info-response.ts
 delete mode 100644 packages/web/src/repositories/liquidity/response/liquidity-detail-list-response.ts
 delete mode 100644 packages/web/src/repositories/liquidity/response/liquidity-reward-response.ts
 delete mode 100644 packages/web/src/repositories/liquidity/response/remove-liquidity-response.ts
 create mode 100644 packages/web/src/repositories/position/index.ts
 delete mode 100644 packages/web/src/repositories/staking/index.ts
 delete mode 100644 packages/web/src/repositories/staking/request/index.ts
 delete mode 100644 packages/web/src/repositories/staking/request/stake-request.ts
 delete mode 100644 packages/web/src/repositories/staking/request/unstake-request.ts
 delete mode 100644 packages/web/src/repositories/staking/response/index.ts
 delete mode 100644 packages/web/src/repositories/staking/response/stake-response.ts
 delete mode 100644 packages/web/src/repositories/staking/response/unstake-response.ts
 delete mode 100644 packages/web/src/repositories/staking/staking-repository-mock.ts
 delete mode 100644 packages/web/src/repositories/staking/staking-repository.ts
 create mode 100644 packages/web/src/repositories/wallet/index.ts
 rename packages/web/src/{components/governance => views/governance/components}/governance-summary/GovernanceSummary.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components}/governance-summary/GovernanceSummary.stories.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components}/governance-summary/GovernanceSummary.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components}/governance-summary/GovernanceSummary.tsx (65%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary}/governance-detail/GovernanceDetail.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary}/governance-detail/GovernanceDetail.stories.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary}/governance-detail/GovernanceDetail.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary}/governance-detail/GovernanceDetail.tsx (84%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary/governance-detail}/governance-detail-info/GovernanceDetailInfo.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary/governance-detail}/governance-detail-info/GovernanceDetailInfo.stories.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary/governance-detail}/governance-detail-info/GovernanceDetailInfo.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components/governance-summary/governance-detail}/governance-detail-info/GovernanceDetailInfo.tsx (89%)
 rename packages/web/src/{components/governance => views/governance/components}/proposals-list/ProposalList.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components}/proposals-list/ProposalList.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components}/proposals-list/ProposalList.tsx (82%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/create-proposal-modal/CreateProposalModal.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/create-proposal-modal/CreateProposalModal.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/create-proposal-modal/CreateProposalModal.tsx (97%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-detail/ProposalDetail.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-detail/ProposalDetail.stories.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-detail/ProposalDetail.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-detail/ProposalDetail.tsx (95%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-detail/ProposalDetailSekeleton.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-header/ProposalHeader.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-header/ProposalHeader.stories.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-header/ProposalHeader.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/proposal-header/ProposalHeader.tsx (99%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/view-proposal-modal/ViewProposalModal.spec.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/view-proposal-modal/ViewProposalModal.stories.tsx (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/view-proposal-modal/ViewProposalModal.styles.ts (100%)
 rename packages/web/src/{components/governance => views/governance/components/proposals-list}/view-proposal-modal/ViewProposalModal.tsx (98%)
 rename packages/web/src/{ => views/governance}/containers/governance-container/GovernanceContainer.tsx (64%)
 rename packages/web/src/{ => views/governance}/containers/proposal-list-container/ProposalListContainer.tsx (98%)

diff --git a/packages/web/.env.example b/packages/web/.env.example
index 59af135ca..bd37e621d 100644
--- a/packages/web/.env.example
+++ b/packages/web/.env.example
@@ -34,7 +34,7 @@ NEXT_PUBLIC_PACKAGE_GOVERNANCE_ADDRESS="g1cu4dufdlzu0l9pekkqhw6mjnrxkp3z7ykst09d
 
 
 # Webpage Config
-NEXT_PUBLIC_BLOCKED_PAGES="governance,leaderboard"
+NEXT_PUBLIC_BLOCKED_PAGES="leaderboard"
 
 NEXT_PUBLIC_UMAMI_SCRIPT_URL=""
 NEXT_PUBLIC_UMAMI_WEBSITE_ID=""
diff --git a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.spec.tsx b/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.spec.tsx
deleted file mode 100644
index 4ce844608..000000000
--- a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.spec.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { render } from "@testing-library/react";
-import { Provider as JotaiProvider } from "jotai";
-import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
-import LearnMoreModal from "./LearnMoreModal";
-
-describe("LearnMoreModal Component", () => {
-  it("LearnMoreModal render", () => {
-    const mockProps = {};
-
-    render(
-      <JotaiProvider>
-        <GnoswapThemeProvider>
-          <LearnMoreModal {...mockProps} />
-        </GnoswapThemeProvider>
-      </JotaiProvider>,
-    );
-  });
-});
diff --git a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.stories.tsx b/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.stories.tsx
deleted file mode 100644
index 7adf582ea..000000000
--- a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import LearnMoreModal from "./LearnMoreModal";
-
-export default {
-  title: "governance/LearnMoreModal",
-  component: LearnMoreModal,
-} as ComponentMeta<typeof LearnMoreModal>;
-
-const Template: ComponentStory<typeof LearnMoreModal> = args => (
-  <LearnMoreModal {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const DefaultTooltip = Template.bind({});
-DefaultTooltip.args = {};
diff --git a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.styles.ts b/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.styles.ts
deleted file mode 100644
index b8f4a2ac7..000000000
--- a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.styles.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { fonts } from "@constants/font.constant";
-import styled from "@emotion/styled";
-import { media } from "@styles/media";
-import mixins from "@styles/mixins";
-import { Z_INDEX } from "@styles/zIndex";
-export const LearnMoreModalBackground = styled.div`
-  position: fixed;
-  overflow: scroll;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  width: 100%;
-  height: 100lvh;
-  z-index: ${Z_INDEX.modal};
-  pointer-events: none;
-`;
-
-export const LearnMoreModalWrapper = styled.div`
-  pointer-events: initial;
-  ${mixins.flexbox("column", "flex-start", "flex-start")};
-  position: absolute;
-  overflow: hidden;
-  width: 690px;
-  border-radius: 8px;
-  padding: 24px;
-  gap: 24px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 10px 14px 60px 0px rgba(0, 0, 0, 0.4);
-  border: 1px solid ${({ theme }) => theme.color.border02};
-  background-color: ${({ theme }) => theme.color.background06};
-  ${media.mobile} {
-    width: 320px;
-    padding: 24px;
-    transform: translate(-50%, -50%);
-  }
-  .modal-body {
-    ${mixins.flexbox("column", "flex-start", "flex-start")};
-    width: 100%;
-    padding: 0px 24px;
-    gap: 16px;
-    ${media.mobile} {
-      padding: 0px;
-    }
-  }
-  .learn-more-btn {
-    height: 57px;
-    background-color: ${({ theme }) => theme.color.background05};
-    &:hover {
-      background-color: ${({ theme }) => theme.color.backgroundOpacity};
-    }
-    ${media.mobile} {
-      width: 272px;
-      height: 41px;
-    }
-  }
-  .active-btn {
-    span {
-      color: ${({ theme }) => theme.color.text27};
-    }
-    background-color: ${({ theme }) => theme.color.background04};
-    &:hover {
-      background-color: ${({ theme }) => theme.color.background04Hover};
-    }
-  }
-`;
-
-export const Progress = styled.div`
-  ${mixins.flexbox("row", "flex-start", "flex-start")};
-  gap: 4px;
-  width: 100%;
-  div {
-    flex: 1;
-    height: 3px;
-    border-radius: 4px;
-    background-color: ${({ theme }) => theme.color.border02};
-  }
-  .active-progress {
-    background-color: ${({ theme }) => theme.color.border03};
-  }
-`;
-
-export const Slider = styled.div`
-  ${mixins.flexbox("column", "flex-start", "flex-start")};
-  gap: 24px;
-  width: 100%;
-`;
-
-export const Title = styled.div`
-  ${mixins.flexbox("column", "center", "center")};
-  padding: 0px 77px;
-  -webkit-user-drag: none;
-  pointer-events: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  ${media.mobile} {
-    padding: 0px;
-  }
-  width: 100%;
-  gap: 8px;
-  h3 {
-    ${fonts.body3}
-    color: ${({ theme }) => theme.color.text02};
-  }
-  div {
-    color: ${({ theme }) => theme.color.text10};
-    ${fonts.body12}
-    text-align: center;
-  }
-  ${media.mobile} {
-    h3 {
-      ${fonts.body7}
-    }
-    div {
-      ${fonts.p2}
-      br {
-        display: none;
-      }
-    }
-  }
-`;
-
-export const BoxImage = styled.div`
-  margin: 0px 77px;
-  position: relative;
-  img {
-    -webkit-user-drag: none;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    width: 100%;
-    aspect-ratio: 3/2;
-    object-fit: cover;
-    border-radius: 8px;
-    display: block;
-    border: 1px solid ${({ theme }) => theme.color.border01};
-  }
-  .slide-icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    * {
-      fill: ${({ theme }) => theme.color.border02};
-    }
-  }
-  .left-icon {
-    left: -77px;
-  }
-  .right-icon {
-    right: -77px;
-  }
-  .active-icon {
-    cursor: pointer;
-    * {
-      fill: ${({ theme }) => theme.color.icon03};
-    }
-  }
-  ${media.mobile} {
-    margin: 0px 32px;
-    .left-icon {
-      left: -40px;
-    }
-    .right-icon {
-      right: -40px;
-    }
-  }
-`;
diff --git a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.tsx b/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.tsx
deleted file mode 100644
index c24998c2b..000000000
--- a/packages/web/src/components/governance/learn-more-modal/LearnMoreModal.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import Button from "@components/common/button/Button";
-import IconStrokeArrowLeft from "@components/common/icons/IconStrokeArrowLeft";
-import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight";
-import { Overlay } from "@components/common/modal/Modal.styles";
-import useEscCloseModal from "@hooks/common/use-esc-close-modal";
-import { ThemeState } from "@states/index";
-import { useAtomValue } from "jotai";
-import React, {
-  Dispatch,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import {
-  BoxImage,
-  LearnMoreModalBackground,
-  LearnMoreModalWrapper,
-  Progress,
-  Slider,
-  Title,
-} from "./LearnMoreModal.styles";
-
-interface Props {
-  setIsShowLearnMoreModal: Dispatch<SetStateAction<boolean>>;
-}
-
-interface LearnMoreProps {
-  title: string;
-  description: JSX.Element;
-  darkImageUrl: string;
-  lightImageURL: string;
-}
-
-const LEARN_MORE_DATA: LearnMoreProps[] = [
-  {
-    title: "How to get xGNOS",
-    description: (
-      <>
-        Stake liquidity from GNOT-GNS pools to earn xGNOS,
-        <br />
-        which represent your voting shares in the GnoSwap Governance.
-      </>
-    ),
-    lightImageURL:
-      "https://media.discordapp.net/attachments/1138037908482314292/1162098588118167803/image_55.png?ex=653ab3a6&is=65283ea6&hm=636cd11c78cc8c37cbddea2df74e27913b05c517a81f1222f749c315a88056aa",
-    darkImageUrl:
-      "https://media.discordapp.net/attachments/1138037908482314292/1162054336499695767/image_53.png?ex=653a8a6f&is=6528156f&hm=289336d87487c2c25490a4834333ea9663b3ed477d4ef818329bc03540a6fdfd",
-  },
-  {
-    title: "Create a Proposal",
-    description: (
-      <>
-        Submit a well-discussed and refined argument <br />
-        in the forum as a formal proposal.
-      </>
-    ),
-    lightImageURL:
-      "https://media.discordapp.net/attachments/1138037908482314292/1162098588118167803/image_55.png?ex=653ab3a6&is=65283ea6&hm=636cd11c78cc8c37cbddea2df74e27913b05c517a81f1222f749c315a88056aa",
-    darkImageUrl:
-      "https://media.discordapp.net/attachments/1138037908482314292/1162054336499695767/image_53.png?ex=653a8a6f&is=6528156f&hm=289336d87487c2c25490a4834333ea9663b3ed477d4ef818329bc03540a6fdfd",
-  },
-  {
-    title: "Cast Your Votes",
-    description: (
-      <>
-        Enable community ownership by voting with xGNOS, <br />
-        which represent your voting shares in the GnoSwap Governance.
-      </>
-    ),
-    lightImageURL:
-      "https://media.discordapp.net/attachments/1138037908482314292/1162098588118167803/image_55.png?ex=653ab3a6&is=65283ea6&hm=636cd11c78cc8c37cbddea2df74e27913b05c517a81f1222f749c315a88056aa",
-    darkImageUrl:
-      "https://media.discordapp.net/attachments/1138037908482314292/1162054336499695767/image_53.png?ex=653a8a6f&is=6528156f&hm=289336d87487c2c25490a4834333ea9663b3ed477d4ef818329bc03540a6fdfd",
-  },
-];
-
-const LearnMoreModal: React.FC<Props> = ({ setIsShowLearnMoreModal }) => {
-  const [index, setIndex] = useState(0);
-  const themeKey = useAtomValue(ThemeState.themeKey);
-  const modalRef = useRef<HTMLDivElement | null>(null);
-
-  const handleResize = () => {
-    if (typeof window !== "undefined" && modalRef.current) {
-      const height = modalRef.current.getBoundingClientRect().height;
-      if (height >= window?.innerHeight) {
-        modalRef.current.style.top = "0";
-        modalRef.current.style.transform = "translateX(-50%)";
-      } else {
-        modalRef.current.style.top = "50%";
-        modalRef.current.style.transform = "translate(-50%, -50%)";
-      }
-    }
-  };
-
-  useEscCloseModal(() => setIsShowLearnMoreModal(false));
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [modalRef]);
-
-  return (
-    <>
-      <LearnMoreModalBackground>
-        <LearnMoreModalWrapper ref={modalRef}>
-          <Progress>
-            {LEARN_MORE_DATA.map((_, i) => (
-              <div
-                key={i}
-                className={`${index >= i ? "active-progress" : ""}`}
-              ></div>
-            ))}
-          </Progress>
-          <Slider>
-            <Title onMouseDown={e => e.preventDefault()}>
-              <h3>{LEARN_MORE_DATA[index].title}</h3>
-              <div>{LEARN_MORE_DATA[index].description}</div>
-            </Title>
-            <BoxImage>
-              <img
-                onDragStart={e => e.preventDefault()}
-                onMouseDown={e => e.preventDefault()}
-                draggable="false"
-                src={
-                  themeKey === "dark"
-                    ? LEARN_MORE_DATA[index].darkImageUrl
-                    : LEARN_MORE_DATA[index].lightImageURL
-                }
-                alt="logo img"
-              />
-              <IconStrokeArrowRight
-                onClick={() =>
-                  setIndex(
-                    index < LEARN_MORE_DATA.length - 1
-                      ? index + 1
-                      : LEARN_MORE_DATA.length - 1,
-                  )
-                }
-                className={`slide-icon right-icon ${
-                  index < LEARN_MORE_DATA.length - 1 ? "active-icon" : ""
-                }`}
-              />
-              <IconStrokeArrowLeft
-                onClick={() => setIndex(index > 0 ? index - 1 : 0)}
-                className={`slide-icon left-icon ${
-                  index > 0 ? "active-icon" : ""
-                }`}
-              />
-            </BoxImage>
-          </Slider>
-          <Button
-            text="Close"
-            className={`${index == 2 ? "active-btn" : ""} learn-more-btn`}
-            style={{
-              fullWidth: true,
-              fontType: "body7",
-              textColor: "text01",
-            }}
-            onClick={() => setIsShowLearnMoreModal(false)}
-          />
-        </LearnMoreModalWrapper>
-      </LearnMoreModalBackground>
-      <Overlay onClick={() => setIsShowLearnMoreModal(false)} />
-    </>
-  );
-};
-
-export default LearnMoreModal;
diff --git a/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx b/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx
index 5c12bf15e..f9bb09fa4 100644
--- a/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx
+++ b/packages/web/src/providers/gnoswap-service-provider/GnoswapServiceProvider.tsx
@@ -8,47 +8,43 @@ import { WebStorageClient } from "@common/clients/storage-client";
 import { NetworkData } from "@constants/chains.constant";
 import {
   DEFAULT_CHAIN_ID,
-  SUPPORT_CHAIN_IDS
+  SUPPORT_CHAIN_IDS,
 } from "@constants/environment.constant";
 import { GnoJSONRPCProvider, GnoProvider } from "@gnolang/gno-js-client";
 import {
   AccountRepository,
-  AccountRepositoryImpl
+  AccountRepositoryImpl,
 } from "@repositories/account";
 import {
   DashboardRepository,
-  DashboardRepositoryImpl
+  DashboardRepositoryImpl,
 } from "@repositories/dashboard";
-import { LeaderboardRepository } from "@repositories/leaderboard/leaderboard-repository";
-import { LeaderboardRepositoryMock } from "@repositories/leaderboard/leaderboard-repository-mock";
 import {
-  LiquidityRepository,
-  LiquidityRepositoryMock
-} from "@repositories/liquidity";
+  LeaderboardRepository,
+  LeaderboardRepositoryMock,
+} from "@repositories/leaderboard";
 import {
   NotificationRepository,
-  NotificationRepositoryImpl
+  NotificationRepositoryImpl,
 } from "@repositories/notification";
-import { PoolRepository } from "@repositories/pool";
-import { PoolRepositoryImpl } from "@repositories/pool/pool-repository-impl";
-import { PositionRepository } from "@repositories/position/position-repository";
-import { PositionRepositoryImpl } from "@repositories/position/position-repository-impl";
+import { PoolRepository, PoolRepositoryImpl } from "@repositories/pool";
 import {
-  StakingRepository,
-  StakingRepositoryMock
-} from "@repositories/staking";
+  PositionRepository,
+  PositionRepositoryImpl,
+} from "@repositories/position";
 import {
   SwapRouterRepository,
-  SwapRouterRepositoryImpl
+  SwapRouterRepositoryImpl,
 } from "@repositories/swap";
-import { TokenRepository } from "@repositories/token";
-import { TokenRepositoryImpl } from "@repositories/token/token-repository-impl";
-import { WalletRepository } from "@repositories/wallet/wallet-repository";
-import { WalletRepositoryImpl } from "@repositories/wallet/wallet-repository-impl";
+import { TokenRepository, TokenRepositoryImpl } from "@repositories/token";
+import {
+  WalletRepository,
+  WalletRepositoryImpl,
+} from "@repositories/wallet";
 import {
   ACCOUNT_SESSION_INFO_KEY,
   GNOSWAP_SESSION_ID_KEY,
-  GNOWSWAP_CONNECTED_KEY
+  GNOWSWAP_CONNECTED_KEY,
 } from "@states/common";
 import { CommonState, WalletState } from "@states/index";
 
@@ -58,9 +54,7 @@ interface GnoswapContextProps {
   rpcProvider: GnoProvider | null;
   gnoswapApiClient: NetworkClient | null;
   accountRepository: AccountRepository;
-  liquidityRepository: LiquidityRepository;
   poolRepository: PoolRepository;
-  stakingRepository: StakingRepository;
   swapRouterRepository: SwapRouterRepository;
   tokenRepository: TokenRepository;
   positionRepository: PositionRepository;
@@ -193,17 +187,10 @@ const GnoswapServiceProvider: React.FC<React.PropsWithChildren> = ({
     rpcProvider,
   ]);
 
-  const liquidityRepository = useMemo(() => {
-    return new LiquidityRepositoryMock();
-  }, []);
-
   const poolRepository = useMemo(() => {
     return new PoolRepositoryImpl(gnoswapApiClient, rpcProvider, walletClient);
   }, [gnoswapApiClient, rpcProvider, walletClient]);
 
-  const stakingRepository = useMemo(() => {
-    return new StakingRepositoryMock();
-  }, []);
 
   const swapRouterRepository = useMemo(() => {
     return new SwapRouterRepositoryImpl(
@@ -250,9 +237,7 @@ const GnoswapServiceProvider: React.FC<React.PropsWithChildren> = ({
         rpcProvider,
         gnoswapApiClient,
         accountRepository,
-        liquidityRepository,
         poolRepository,
-        stakingRepository,
         tokenRepository,
         swapRouterRepository,
         positionRepository,
diff --git a/packages/web/src/repositories/leaderboard/index.ts b/packages/web/src/repositories/leaderboard/index.ts
new file mode 100644
index 000000000..dbe4ff796
--- /dev/null
+++ b/packages/web/src/repositories/leaderboard/index.ts
@@ -0,0 +1,2 @@
+export * from "./leaderboard-repository";
+export * from "./leaderboard-repository-mock";
diff --git a/packages/web/src/repositories/liquidity/index.ts b/packages/web/src/repositories/liquidity/index.ts
deleted file mode 100644
index 0289ffc29..000000000
--- a/packages/web/src/repositories/liquidity/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./response";
-export * from "./liquidity-repository";
-export * from "./liquidity-repository-mock";
diff --git a/packages/web/src/repositories/liquidity/liquidity-repository-mock.ts b/packages/web/src/repositories/liquidity/liquidity-repository-mock.ts
deleted file mode 100644
index 96451a878..000000000
--- a/packages/web/src/repositories/liquidity/liquidity-repository-mock.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { generateTxHash } from "@test/generate-utils";
-
-import {
-  AddLiquidityResponse,
-  ClaimRewardResponse,
-  LiquidityRepository,
-  RemoveLiquidityResponse,
-} from ".";
-
-export class LiquidityRepositoryMock implements LiquidityRepository {
-  public addLiquidityBy = async (): Promise<AddLiquidityResponse> => {
-    return {
-      tx_hash: generateTxHash(),
-    };
-  };
-
-  public removeLiquiditiesBy = async (): Promise<RemoveLiquidityResponse> => {
-    return {
-      tx_hash: generateTxHash(),
-    };
-  };
-
-  public claimRewardByPoolId = async (): Promise<ClaimRewardResponse> => {
-    return {
-      tx_hash: generateTxHash(),
-    };
-  };
-}
diff --git a/packages/web/src/repositories/liquidity/liquidity-repository.ts b/packages/web/src/repositories/liquidity/liquidity-repository.ts
deleted file mode 100644
index 8a932a97b..000000000
--- a/packages/web/src/repositories/liquidity/liquidity-repository.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { AddLiquidityRequest, RemoveLiquidityRequest } from "./request";
-import {
-  AddLiquidityResponse,
-  ClaimRewardResponse,
-  RemoveLiquidityResponse,
-} from "./response";
-
-export interface LiquidityRepository {
-  addLiquidityBy: (
-    request: AddLiquidityRequest,
-  ) => Promise<AddLiquidityResponse>;
-
-  removeLiquiditiesBy: (
-    request: RemoveLiquidityRequest,
-  ) => Promise<RemoveLiquidityResponse>;
-
-  claimRewardByPoolId: (poolId: string) => Promise<ClaimRewardResponse>;
-}
diff --git a/packages/web/src/repositories/liquidity/request/add-liquidity-request.ts b/packages/web/src/repositories/liquidity/request/add-liquidity-request.ts
deleted file mode 100644
index 4362c5a0e..000000000
--- a/packages/web/src/repositories/liquidity/request/add-liquidity-request.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { TokenInfo } from "@models/token/token-info";
-
-export interface AddLiquidityRequest {
-  tokenA: TokenInfo;
-  tokenB: TokenInfo;
-  tokenAAmount: number;
-  tokenBAmount: number;
-  fee: number;
-  minPrice: number;
-  maxPrice: number;
-}
diff --git a/packages/web/src/repositories/liquidity/request/claim-reward-request.ts b/packages/web/src/repositories/liquidity/request/claim-reward-request.ts
deleted file mode 100644
index c12bfb367..000000000
--- a/packages/web/src/repositories/liquidity/request/claim-reward-request.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface ClaimRewardRequest {
-  poolPath: string;
-}
diff --git a/packages/web/src/repositories/liquidity/request/index.ts b/packages/web/src/repositories/liquidity/request/index.ts
deleted file mode 100644
index 2f74325c2..000000000
--- a/packages/web/src/repositories/liquidity/request/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./add-liquidity-request";
-export * from "./claim-reward-request";
-export * from "./remove-liquidity-request";
diff --git a/packages/web/src/repositories/liquidity/request/remove-liquidity-request.ts b/packages/web/src/repositories/liquidity/request/remove-liquidity-request.ts
deleted file mode 100644
index d9c5c8675..000000000
--- a/packages/web/src/repositories/liquidity/request/remove-liquidity-request.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface RemoveLiquidityRequest {
-  positionIds: Array<string>;
-}
diff --git a/packages/web/src/repositories/liquidity/response/add-liquidity-response.ts b/packages/web/src/repositories/liquidity/response/add-liquidity-response.ts
deleted file mode 100644
index e1e022c91..000000000
--- a/packages/web/src/repositories/liquidity/response/add-liquidity-response.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface AddLiquidityResponse {
-  tx_hash: string;
-}
diff --git a/packages/web/src/repositories/liquidity/response/claim-reward-response.ts b/packages/web/src/repositories/liquidity/response/claim-reward-response.ts
deleted file mode 100644
index 04ff6b2a5..000000000
--- a/packages/web/src/repositories/liquidity/response/claim-reward-response.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface ClaimRewardResponse {
-  tx_hash: string;
-}
diff --git a/packages/web/src/repositories/liquidity/response/index.ts b/packages/web/src/repositories/liquidity/response/index.ts
deleted file mode 100644
index 851fec1ad..000000000
--- a/packages/web/src/repositories/liquidity/response/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./add-liquidity-response";
-export * from "./claim-reward-response";
-export * from "./liquidity-detail-info-response";
-export * from "./liquidity-detail-list-response";
-export * from "./liquidity-reward-response";
-export * from "./remove-liquidity-response";
diff --git a/packages/web/src/repositories/liquidity/response/liquidity-detail-info-response.ts b/packages/web/src/repositories/liquidity/response/liquidity-detail-info-response.ts
deleted file mode 100644
index 0b249d568..000000000
--- a/packages/web/src/repositories/liquidity/response/liquidity-detail-info-response.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export interface LiquidityDetailInfoResponse {
-  pool_id: string;
-  liquidity_id: string;
-  liquidity_type: "NONE" | "PROVIDED";
-  stake_type: "NONE" | "STAKED" | "UNSTAKING";
-  in_range: boolean;
-  max_rate: number;
-  min_rate: number;
-  fee_rate: number;
-  liquidity: TokenPair;
-  reward: {
-    swap: TokenPair;
-    staking: TokenPair;
-  };
-  apr: TokenPair;
-}
-
-interface TokenPair {
-  tokenA: TokenBalance;
-  tokenB: TokenBalance;
-}
-
-interface TokenBalance {
-  token_id: string;
-  name: string;
-  symbol: string;
-  amount: {
-    value: number;
-    denom: string;
-  };
-}
diff --git a/packages/web/src/repositories/liquidity/response/liquidity-detail-list-response.ts b/packages/web/src/repositories/liquidity/response/liquidity-detail-list-response.ts
deleted file mode 100644
index 8fce866ba..000000000
--- a/packages/web/src/repositories/liquidity/response/liquidity-detail-list-response.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-export interface LiquidityDetailListResponse {
-  total: number;
-  hits: number;
-  liquidities: Array<LiquidityInfo>;
-}
-
-interface LiquidityInfo {
-  pool_id: string;
-  liquidity_id: string;
-  liquidity_type: "NONE" | "PROVIDED";
-  stake_type: "NONE" | "STAKED" | "UNSTAKING";
-  in_range: boolean;
-  max_rate: number;
-  min_rate: number;
-  fee_rate: number;
-  liquidity: TokenPair;
-  reward: {
-    swap: TokenPair;
-    staking: TokenPair;
-  };
-  apr: TokenPair;
-}
-
-interface TokenPair {
-  tokenA: TokenBalance;
-  tokenB: TokenBalance;
-}
-
-interface TokenBalance {
-  token_id: string;
-  name: string;
-  symbol: string;
-  amount: {
-    value: number;
-    denom: string;
-  };
-}
diff --git a/packages/web/src/repositories/liquidity/response/liquidity-reward-response.ts b/packages/web/src/repositories/liquidity/response/liquidity-reward-response.ts
deleted file mode 100644
index 3e2268eca..000000000
--- a/packages/web/src/repositories/liquidity/response/liquidity-reward-response.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export interface LiquidityRewardResponse {
-  pool_id: string;
-  is_claim: boolean;
-  total_balance: TokenPair;
-  daily_earning: TokenPair;
-  reward: {
-    staking: TokenPair;
-    swap: TokenPair;
-  };
-}
-
-interface TokenPair {
-  tokenA: TokenBalance;
-  tokenB: TokenBalance;
-}
-
-interface TokenBalance {
-  token_id: string;
-  name: string;
-  symbol: string;
-  amount: {
-    value: number;
-    denom: string;
-  };
-}
diff --git a/packages/web/src/repositories/liquidity/response/remove-liquidity-response.ts b/packages/web/src/repositories/liquidity/response/remove-liquidity-response.ts
deleted file mode 100644
index e0a4b4abb..000000000
--- a/packages/web/src/repositories/liquidity/response/remove-liquidity-response.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface RemoveLiquidityResponse {
-  tx_hash: string;
-}
diff --git a/packages/web/src/repositories/pool/index.ts b/packages/web/src/repositories/pool/index.ts
index 2b122c59a..e273b6ad9 100644
--- a/packages/web/src/repositories/pool/index.ts
+++ b/packages/web/src/repositories/pool/index.ts
@@ -1,3 +1,5 @@
-export * from "./response";
 export * from "./pool-repository";
+export * from "./pool-repository-impl";
 export * from "./pool-repository-mock";
+export * from "./response";
+
diff --git a/packages/web/src/repositories/position/index.ts b/packages/web/src/repositories/position/index.ts
new file mode 100644
index 000000000..a2d954d9b
--- /dev/null
+++ b/packages/web/src/repositories/position/index.ts
@@ -0,0 +1,2 @@
+export * from "./position-repository";
+export * from "./position-repository-impl";
diff --git a/packages/web/src/repositories/staking/index.ts b/packages/web/src/repositories/staking/index.ts
deleted file mode 100644
index 54ad7b7a4..000000000
--- a/packages/web/src/repositories/staking/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./response";
-export * from "./staking-repository";
-export * from "./staking-repository-mock";
diff --git a/packages/web/src/repositories/staking/request/index.ts b/packages/web/src/repositories/staking/request/index.ts
deleted file mode 100644
index beeccd66b..000000000
--- a/packages/web/src/repositories/staking/request/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./stake-request";
diff --git a/packages/web/src/repositories/staking/request/stake-request.ts b/packages/web/src/repositories/staking/request/stake-request.ts
deleted file mode 100644
index 2112d7dc5..000000000
--- a/packages/web/src/repositories/staking/request/stake-request.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface StakeRequest {
-  period: string;
-
-  liquidityIds: Array<string>;
-}
diff --git a/packages/web/src/repositories/staking/request/unstake-request.ts b/packages/web/src/repositories/staking/request/unstake-request.ts
deleted file mode 100644
index c64da9100..000000000
--- a/packages/web/src/repositories/staking/request/unstake-request.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface UnstakeRequest {
-  liquidityIds: Array<string>;
-}
diff --git a/packages/web/src/repositories/staking/response/index.ts b/packages/web/src/repositories/staking/response/index.ts
deleted file mode 100644
index c4450d152..000000000
--- a/packages/web/src/repositories/staking/response/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./stake-response";
-export * from "./unstake-response";
diff --git a/packages/web/src/repositories/staking/response/stake-response.ts b/packages/web/src/repositories/staking/response/stake-response.ts
deleted file mode 100644
index c0ae1dc8c..000000000
--- a/packages/web/src/repositories/staking/response/stake-response.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface StakeResponse {
-  tx_hash: string;
-}
diff --git a/packages/web/src/repositories/staking/response/unstake-response.ts b/packages/web/src/repositories/staking/response/unstake-response.ts
deleted file mode 100644
index 4bbb47f37..000000000
--- a/packages/web/src/repositories/staking/response/unstake-response.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface UnstakeResponse {
-  tx_hash: string;
-}
diff --git a/packages/web/src/repositories/staking/staking-repository-mock.ts b/packages/web/src/repositories/staking/staking-repository-mock.ts
deleted file mode 100644
index 031371a96..000000000
--- a/packages/web/src/repositories/staking/staking-repository-mock.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { generateTxHash } from "@test/generate-utils";
-
-import { StakeResponse, StakingRepository, UnstakeResponse } from ".";
-
-export class StakingRepositoryMock implements StakingRepository {
-  public stakeBy = async (): Promise<StakeResponse> => {
-    return {
-      tx_hash: generateTxHash(),
-    };
-  };
-
-  public unstakeBy = async (): Promise<UnstakeResponse> => {
-    return {
-      tx_hash: generateTxHash(),
-    };
-  };
-}
diff --git a/packages/web/src/repositories/staking/staking-repository.ts b/packages/web/src/repositories/staking/staking-repository.ts
deleted file mode 100644
index ec870441b..000000000
--- a/packages/web/src/repositories/staking/staking-repository.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { StakeRequest } from "./request";
-import { UnstakeRequest } from "./request/unstake-request";
-import { StakeResponse, UnstakeResponse } from "./response";
-
-export interface StakingRepository {
-  stakeBy: (request: StakeRequest) => Promise<StakeResponse>;
-
-  unstakeBy: (request: UnstakeRequest) => Promise<UnstakeResponse>;
-}
diff --git a/packages/web/src/repositories/token/index.ts b/packages/web/src/repositories/token/index.ts
index f12696527..7452aceea 100644
--- a/packages/web/src/repositories/token/index.ts
+++ b/packages/web/src/repositories/token/index.ts
@@ -1,3 +1,4 @@
 export * from "./response";
 export * from "./token-repository";
+export * from "./token-repository-impl";
 export * from "./token-repository-mock";
diff --git a/packages/web/src/repositories/wallet/index.ts b/packages/web/src/repositories/wallet/index.ts
new file mode 100644
index 000000000..543059a4b
--- /dev/null
+++ b/packages/web/src/repositories/wallet/index.ts
@@ -0,0 +1,2 @@
+export * from "./wallet-repository";
+export * from "./wallet-repository-impl";
diff --git a/packages/web/src/views/governance/Governance.tsx b/packages/web/src/views/governance/Governance.tsx
index 0669a8b19..c57c00744 100644
--- a/packages/web/src/views/governance/Governance.tsx
+++ b/packages/web/src/views/governance/Governance.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 
 import Footer from "@components/common/footer/Footer";
-import GovernanceContainer from "@containers/governance-container/GovernanceContainer";
 import HeaderContainer from "@containers/header-container/HeaderContainer";
-import ProposalListContainer from "@containers/proposal-list-container/ProposalListContainer";
 
+import GovernanceContainer from "./containers/governance-container/GovernanceContainer";
+import ProposalListContainer from "./containers/proposal-list-container/ProposalListContainer";
 import GovernanceLayout from "./GovernanceLayout";
 
 const Governance: React.FC = () => {
diff --git a/packages/web/src/views/governance/GovernanceLayout.tsx b/packages/web/src/views/governance/GovernanceLayout.tsx
index 11340b82e..915aee280 100644
--- a/packages/web/src/views/governance/GovernanceLayout.tsx
+++ b/packages/web/src/views/governance/GovernanceLayout.tsx
@@ -1,9 +1,9 @@
-import IconFile from "@components/common/icons/IconFile";
-import React, { useState } from "react";
-import { GovernanceLayoutWrapper, LinkButton } from "./GovernanceLayout.styles";
 import Link from "next/link";
+import React from "react";
+
 import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight";
-import LearnMoreModal from "@components/governance/learn-more-modal/LearnMoreModal";
+
+import { GovernanceLayoutWrapper, LinkButton } from "./GovernanceLayout.styles";
 
 interface GovernanceLayoutProps {
   header: React.ReactNode;
@@ -18,20 +18,12 @@ const GovernanceLayout: React.FC<GovernanceLayoutProps> = ({
   list,
   footer,
 }) => {
-  const [isShowLearnMoreModal, setIsShowLearnMoreModal] = useState(false);
   return (
     <GovernanceLayoutWrapper>
       {header}
       <section className="governance-section">
         <div className="title-container">
           <h3 className="title">Governance</h3>
-          <div
-            className="sub-title-layout"
-            onClick={() => setIsShowLearnMoreModal(true)}
-          >
-            <p>Learn More</p>
-            <IconFile />
-          </div>
         </div>
         <div className="summary-container">
           {summary}
@@ -47,9 +39,6 @@ const GovernanceLayout: React.FC<GovernanceLayoutProps> = ({
         <div className="list-container">{list}</div>
       </div>
       {footer}
-      {isShowLearnMoreModal && (
-        <LearnMoreModal setIsShowLearnMoreModal={setIsShowLearnMoreModal} />
-      )}
     </GovernanceLayoutWrapper>
   );
 };
diff --git a/packages/web/src/components/governance/governance-summary/GovernanceSummary.spec.tsx b/packages/web/src/views/governance/components/governance-summary/GovernanceSummary.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/governance-summary/GovernanceSummary.spec.tsx
rename to packages/web/src/views/governance/components/governance-summary/GovernanceSummary.spec.tsx
diff --git a/packages/web/src/components/governance/governance-summary/GovernanceSummary.stories.tsx b/packages/web/src/views/governance/components/governance-summary/GovernanceSummary.stories.tsx
similarity index 100%
rename from packages/web/src/components/governance/governance-summary/GovernanceSummary.stories.tsx
rename to packages/web/src/views/governance/components/governance-summary/GovernanceSummary.stories.tsx
diff --git a/packages/web/src/components/governance/governance-summary/GovernanceSummary.styles.ts b/packages/web/src/views/governance/components/governance-summary/GovernanceSummary.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/governance-summary/GovernanceSummary.styles.ts
rename to packages/web/src/views/governance/components/governance-summary/GovernanceSummary.styles.ts
diff --git a/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx b/packages/web/src/views/governance/components/governance-summary/GovernanceSummary.tsx
similarity index 65%
rename from packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx
rename to packages/web/src/views/governance/components/governance-summary/GovernanceSummary.tsx
index 6e7d26c64..5554e5068 100644
--- a/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx
+++ b/packages/web/src/views/governance/components/governance-summary/GovernanceSummary.tsx
@@ -1,9 +1,10 @@
+import { GovernanceDetailData } from "./governance-detail/governance-detail-info/GovernanceDetailInfo";
+import GovernanceDetail from "./governance-detail/GovernanceDetail";
+
 import { GovernanceSummaryWrapper } from "./GovernanceSummary.styles";
-import { GovernanceDetailInfoProps } from "@containers/governance-container/GovernanceContainer";
-import GovernanceDetail from "../governance-detail/GovernanceDetail";
 
 interface GovernanceSummaryProps {
-  governanceDetailInfo?: GovernanceDetailInfoProps;
+  governanceDetailInfo?: GovernanceDetailData;
   loading?: boolean;
 }
 
diff --git a/packages/web/src/components/governance/governance-detail/GovernanceDetail.spec.tsx b/packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/governance-detail/GovernanceDetail.spec.tsx
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.spec.tsx
diff --git a/packages/web/src/components/governance/governance-detail/GovernanceDetail.stories.tsx b/packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.stories.tsx
similarity index 100%
rename from packages/web/src/components/governance/governance-detail/GovernanceDetail.stories.tsx
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.stories.tsx
diff --git a/packages/web/src/components/governance/governance-detail/GovernanceDetail.styles.ts b/packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/governance-detail/GovernanceDetail.styles.ts
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.styles.ts
diff --git a/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx b/packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.tsx
similarity index 84%
rename from packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.tsx
index a793d411b..e90c2b999 100644
--- a/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx
+++ b/packages/web/src/views/governance/components/governance-summary/governance-detail/GovernanceDetail.tsx
@@ -1,9 +1,9 @@
+import GovernanceDetailInfo, { GovernanceDetailData } from "./governance-detail-info/GovernanceDetailInfo";
+
 import { GovernanceDetailWrapper } from "./GovernanceDetail.styles";
-import { GovernanceDetailInfoProps } from "@containers/governance-container/GovernanceContainer";
-import GovernanceDetailInfo from "../governance-detail-info/GovernanceDetailInfo";
 
 interface GovernanceDetailProps {
-  governanceDetailInfo?: GovernanceDetailInfoProps;
+  governanceDetailInfo?: GovernanceDetailData;
   loading?: boolean;
 }
 
diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.spec.tsx b/packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.spec.tsx
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.spec.tsx
diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.stories.tsx b/packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.stories.tsx
similarity index 100%
rename from packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.stories.tsx
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.stories.tsx
diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts b/packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.styles.ts
diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx b/packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.tsx
similarity index 89%
rename from packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx
rename to packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.tsx
index b0c4a1a6d..671f5c38a 100644
--- a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx
+++ b/packages/web/src/views/governance/components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo.tsx
@@ -1,12 +1,21 @@
+import { css, Global, type Theme } from "@emotion/react";
 import React from "react";
+
 import IconInfo from "@components/common/icons/IconInfo";
 import Tooltip from "@components/common/tooltip/Tooltip";
+import { pulseSkeletonStyle } from "@constants/skeleton.constant";
+
 import {
   GovernanceDetailInfoTooltipContent,
-  GovernanceDetailInfoWrapper,
+  GovernanceDetailInfoWrapper
 } from "./GovernanceDetailInfo.styles";
-import { Global, css, type Theme } from "@emotion/react";
-import { pulseSkeletonStyle } from "@constants/skeleton.constant";
+
+export interface GovernanceDetailData {
+  totalXGnosIssued: string;
+  communityPool: string;
+  passedProposals: string;
+  activeProposals: string;
+}
 
 interface GovernanceDetailInfoProps {
   title: string;
diff --git a/packages/web/src/components/governance/proposals-list/ProposalList.spec.tsx b/packages/web/src/views/governance/components/proposals-list/ProposalList.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/proposals-list/ProposalList.spec.tsx
rename to packages/web/src/views/governance/components/proposals-list/ProposalList.spec.tsx
diff --git a/packages/web/src/components/governance/proposals-list/ProposalList.styles.ts b/packages/web/src/views/governance/components/proposals-list/ProposalList.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/proposals-list/ProposalList.styles.ts
rename to packages/web/src/views/governance/components/proposals-list/ProposalList.styles.ts
diff --git a/packages/web/src/components/governance/proposals-list/ProposalList.tsx b/packages/web/src/views/governance/components/proposals-list/ProposalList.tsx
similarity index 82%
rename from packages/web/src/components/governance/proposals-list/ProposalList.tsx
rename to packages/web/src/views/governance/components/proposals-list/ProposalList.tsx
index 86a6be764..b58a7cdc6 100644
--- a/packages/web/src/components/governance/proposals-list/ProposalList.tsx
+++ b/packages/web/src/views/governance/components/proposals-list/ProposalList.tsx
@@ -1,12 +1,15 @@
-import { ProposalDetailProps } from "@containers/proposal-list-container/ProposalListContainer";
 import { DEVICE_TYPE } from "@styles/media";
-import ProposalDetail from "../proposal-detail/ProposalDetail";
-import ProposalHeader from "../proposal-header/ProposalHeader";
-import ViewProposalModal from "../view-proposal-modal/ViewProposalModal";
-import { ProposalListWrapper } from "./ProposalList.styles";
+import { ProposalDetailProps } from "@views/governance/containers/proposal-list-container/ProposalListContainer";
 import { Dispatch, SetStateAction } from "react";
-import CreateProposalModal from "../create-proposal-modal/CreateProposalModal";
-import ProposalDetailSkeleton from "../proposal-detail/ProposalDetailSekeleton";
+
+import CreateProposalModal from "./create-proposal-modal/CreateProposalModal";
+import ProposalDetail from "./proposal-detail/ProposalDetail";
+import ProposalDetailSkeleton from "./proposal-detail/ProposalDetailSekeleton";
+import ProposalHeader from "./proposal-header/ProposalHeader";
+import ViewProposalModal from "./view-proposal-modal/ViewProposalModal";
+
+import { ProposalListWrapper } from "./ProposalList.styles";
+
 interface ProposalListProps {
   proposalList: ProposalDetailProps[];
   isShowCancelled: boolean;
diff --git a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.spec.tsx b/packages/web/src/views/governance/components/proposals-list/create-proposal-modal/CreateProposalModal.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.spec.tsx
rename to packages/web/src/views/governance/components/proposals-list/create-proposal-modal/CreateProposalModal.spec.tsx
diff --git a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts b/packages/web/src/views/governance/components/proposals-list/create-proposal-modal/CreateProposalModal.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts
rename to packages/web/src/views/governance/components/proposals-list/create-proposal-modal/CreateProposalModal.styles.ts
diff --git a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx b/packages/web/src/views/governance/components/proposals-list/create-proposal-modal/CreateProposalModal.tsx
similarity index 97%
rename from packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx
rename to packages/web/src/views/governance/components/proposals-list/create-proposal-modal/CreateProposalModal.tsx
index 6b10782f7..bdfe1a696 100644
--- a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx
+++ b/packages/web/src/views/governance/components/proposals-list/create-proposal-modal/CreateProposalModal.tsx
@@ -1,3 +1,14 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import FormInput from "@components/common/form-input/FormInput";
 import FormTextArea from "@components/common/form-textarea/FormTextArea";
@@ -6,8 +17,8 @@ import IconAdd from "@components/common/icons/IconAdd";
 import IconClose from "@components/common/icons/IconCancel";
 import IconRemove from "@components/common/icons/IconRemove";
 import { Overlay } from "@components/common/modal/Modal.styles";
-import { yupResolver } from "@hookform/resolvers/yup";
 import useEscCloseModal from "@hooks/common/use-esc-close-modal";
+import useLockedBody from "@hooks/common/use-lock-body";
 import { DEVICE_TYPE } from "@styles/media";
 import {
   getCreateProposalChangeParameterValidation,
@@ -15,22 +26,13 @@ import {
   getCreateProposalValidation,
 } from "@utils/create-proposal-validation";
 import { isEmptyObject } from "@utils/validation-utils";
-import React, {
-  useMemo,
-  useState,
-  useRef,
-  useEffect,
-  Dispatch,
-  SetStateAction,
-} from "react";
-import { useFieldArray, useForm } from "react-hook-form";
+
 import {
   BoxItem,
   CreateProposalModalBackground,
   CreateProposalModalWrapper,
   IconButton,
 } from "./CreateProposalModal.styles";
-import useLockedBody from "@hooks/common/use-lock-body";
 
 interface Props {
   breakpoint: DEVICE_TYPE;
@@ -113,6 +115,7 @@ const CreateProposalModal: React.FC<Props> = ({
     };
   }, [modalRef]);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const validationProps: any = useMemo(() => {
     if (type === ProposalOption[1]) {
       return getCreateProposalCommunityPoolSpendValidation();
@@ -257,11 +260,11 @@ const CreateProposalModal: React.FC<Props> = ({
                           placeholder="Subspace"
                           errorText={
                             errors?.variable
-                              ? (errors?.variable as any)[index]?.subspace
+                              ? (errors?.variable)[index]?.subspace
                                   ?.message ||
-                                (errors?.variable as any)[index]?.key
+                                (errors?.variable)[index]?.key
                                   ?.message ||
-                                (errors?.variable as any)[index]?.value?.message
+                                (errors?.variable)[index]?.value?.message
                               : undefined
                           }
                           {...register(`variable.${index}.subspace`)}
diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetail.spec.tsx b/packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/proposal-detail/ProposalDetail.spec.tsx
rename to packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.spec.tsx
diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetail.stories.tsx b/packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.stories.tsx
similarity index 100%
rename from packages/web/src/components/governance/proposal-detail/ProposalDetail.stories.tsx
rename to packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.stories.tsx
diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts b/packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts
rename to packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.styles.ts
diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetail.tsx b/packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.tsx
similarity index 95%
rename from packages/web/src/components/governance/proposal-detail/ProposalDetail.tsx
rename to packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.tsx
index b7914be0a..cdbd6985c 100644
--- a/packages/web/src/components/governance/proposal-detail/ProposalDetail.tsx
+++ b/packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetail.tsx
@@ -1,20 +1,22 @@
+import { css, Global, type Theme } from "@emotion/react";
+import dayjs from "dayjs";
+import relative from "dayjs/plugin/relativeTime";
+import React from "react";
+
 import Badge, { BADGE_TYPE } from "@components/common/badge/Badge";
+import IconCircleInCancel from "@components/common/icons/IconCircleInCancel";
 import IconCircleInCheck from "@components/common/icons/IconCircleInCheck";
+import IconInfo from "@components/common/icons/IconInfo";
 import IconOutlineClock from "@components/common/icons/IconOutlineClock";
+import IconPass from "@components/common/icons/IconPass";
 import FloatingTooltip from "@components/common/tooltip/FloatingTooltip";
+import { ProposalDetailProps } from "@views/governance/containers/proposal-list-container/ProposalListContainer";
+
 import {
   ProgressBar,
   ProgressWrapper,
-  ProposalDetailWrapper,
+  ProposalDetailWrapper
 } from "./ProposalDetail.styles";
-import React from "react";
-import IconCircleInCancel from "@components/common/icons/IconCircleInCancel";
-import IconInfo from "@components/common/icons/IconInfo";
-import { ProposalDetailProps } from "@containers/proposal-list-container/ProposalListContainer";
-import IconPass from "@components/common/icons/IconPass";
-import { Global, css, type Theme } from "@emotion/react";
-import dayjs from "dayjs";
-import relative from "dayjs/plugin/relativeTime";
 
 dayjs.extend(relative);
 
diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx b/packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetailSekeleton.tsx
similarity index 100%
rename from packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx
rename to packages/web/src/views/governance/components/proposals-list/proposal-detail/ProposalDetailSekeleton.tsx
diff --git a/packages/web/src/components/governance/proposal-header/ProposalHeader.spec.tsx b/packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/proposal-header/ProposalHeader.spec.tsx
rename to packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.spec.tsx
diff --git a/packages/web/src/components/governance/proposal-header/ProposalHeader.stories.tsx b/packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.stories.tsx
similarity index 100%
rename from packages/web/src/components/governance/proposal-header/ProposalHeader.stories.tsx
rename to packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.stories.tsx
diff --git a/packages/web/src/components/governance/proposal-header/ProposalHeader.styles.ts b/packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/proposal-header/ProposalHeader.styles.ts
rename to packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.styles.ts
diff --git a/packages/web/src/components/governance/proposal-header/ProposalHeader.tsx b/packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.tsx
similarity index 99%
rename from packages/web/src/components/governance/proposal-header/ProposalHeader.tsx
rename to packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.tsx
index bca94223a..d33b58b8b 100644
--- a/packages/web/src/components/governance/proposal-header/ProposalHeader.tsx
+++ b/packages/web/src/views/governance/components/proposals-list/proposal-header/ProposalHeader.tsx
@@ -1,8 +1,10 @@
+import { Dispatch, SetStateAction } from "react";
+
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import IconNewTab from "@components/common/icons/IconNewTab";
 import Switch from "@components/common/switch/Switch";
+
 import { ProposalHeaderWrapper } from "./ProposalHeader.styles";
-import { Dispatch, SetStateAction } from "react";
 
 interface ProposalHeaderProps {
   isShowCancelled: boolean;
diff --git a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.spec.tsx b/packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.spec.tsx
similarity index 100%
rename from packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.spec.tsx
rename to packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.spec.tsx
diff --git a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.stories.tsx b/packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.stories.tsx
similarity index 100%
rename from packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.stories.tsx
rename to packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.stories.tsx
diff --git a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.styles.ts b/packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.styles.ts
similarity index 100%
rename from packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.styles.ts
rename to packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.styles.ts
diff --git a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.tsx b/packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.tsx
similarity index 98%
rename from packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.tsx
rename to packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.tsx
index 34e803b46..31666676b 100644
--- a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.tsx
+++ b/packages/web/src/views/governance/components/proposals-list/view-proposal-modal/ViewProposalModal.tsx
@@ -1,3 +1,15 @@
+import dayjs from "dayjs";
+import relative from "dayjs/plugin/relativeTime";
+import React, {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
 import Badge, { BADGE_TYPE } from "@components/common/badge/Badge";
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import IconClose from "@components/common/icons/IconCancel";
@@ -7,18 +19,13 @@ import IconCircleInCheck from "@components/common/icons/IconCircleInCheck";
 import IconInfo from "@components/common/icons/IconInfo";
 import IconOutlineClock from "@components/common/icons/IconOutlineClock";
 import IconPass from "@components/common/icons/IconPass";
+import { Overlay } from "@components/common/modal/Modal.styles";
 import FloatingTooltip from "@components/common/tooltip/FloatingTooltip";
-import { ProposalDetailProps } from "@containers/proposal-list-container/ProposalListContainer";
+import useEscCloseModal from "@hooks/common/use-esc-close-modal";
+import useLockedBody from "@hooks/common/use-lock-body";
 import { DEVICE_TYPE } from "@styles/media";
-import React, {
-  Dispatch,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { ProposalDetailProps } from "@views/governance/containers/proposal-list-container/ProposalListContainer";
+
 import {
   BoxQuorumWrapper,
   ModalHeaderWrapper,
@@ -28,13 +35,8 @@ import {
   ProposalContentWrapper,
   ViewProposalModalBackground,
   ViewProposalModalWrapper,
-  VotingPowerWrapper,
+  VotingPowerWrapper
 } from "./ViewProposalModal.styles";
-import dayjs from "dayjs";
-import relative from "dayjs/plugin/relativeTime";
-import { Overlay } from "@components/common/modal/Modal.styles";
-import useEscCloseModal from "@hooks/common/use-esc-close-modal";
-import useLockedBody from "@hooks/common/use-lock-body";
 
 dayjs.extend(relative);
 
diff --git a/packages/web/src/containers/governance-container/GovernanceContainer.tsx b/packages/web/src/views/governance/containers/governance-container/GovernanceContainer.tsx
similarity index 64%
rename from packages/web/src/containers/governance-container/GovernanceContainer.tsx
rename to packages/web/src/views/governance/containers/governance-container/GovernanceContainer.tsx
index 3766a8bd2..56f387bed 100644
--- a/packages/web/src/containers/governance-container/GovernanceContainer.tsx
+++ b/packages/web/src/views/governance/containers/governance-container/GovernanceContainer.tsx
@@ -1,30 +1,25 @@
-import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import GovernanceSummary from "@components/governance/governance-summary/GovernanceSummary";
+import React from "react";
 
-export interface GovernanceDetailInfoProps {
-  totalXGnosIssued: string;
-  communityPool: string;
-  passedProposals: string;
-  activeProposals: string;
-}
+import { GovernanceDetailData } from "../../components/governance-summary/governance-detail/governance-detail-info/GovernanceDetailInfo";
+import GovernanceSummary from "../../components/governance-summary/GovernanceSummary";
 
-const initialGovernanceDetailInfo: GovernanceDetailInfoProps = {
+const dummyGovernanceDetailInfo: GovernanceDetailData = {
   totalXGnosIssued: "59,144,225",
   communityPool: "2,412,148",
   passedProposals: "42",
   activeProposals: "2",
 };
 
-async function fetchGovernanceDetailInfo(): Promise<GovernanceDetailInfoProps> {
+async function fetchGovernanceDetailInfo(): Promise<GovernanceDetailData> {
   return new Promise(resolve => setTimeout(resolve, 2000)).then(
-    () => initialGovernanceDetailInfo,
+    () => dummyGovernanceDetailInfo,
   );
 }
 
 const GovernanceContainer: React.FC = () => {
   const { data: governanceDetailInfo, isFetching } = useQuery<
-    GovernanceDetailInfoProps,
+    GovernanceDetailData,
     Error
   >({
     queryKey: ["governanceDetailInfo"],
diff --git a/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx b/packages/web/src/views/governance/containers/proposal-list-container/ProposalListContainer.tsx
similarity index 98%
rename from packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx
rename to packages/web/src/views/governance/containers/proposal-list-container/ProposalListContainer.tsx
index dd7f05160..fee19ac62 100644
--- a/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx
+++ b/packages/web/src/views/governance/containers/proposal-list-container/ProposalListContainer.tsx
@@ -1,9 +1,11 @@
-import React, { useState, useCallback } from "react";
 import { useQuery } from "@tanstack/react-query";
-import ProposalList from "@components/governance/proposals-list/ProposalList";
+import React, { useCallback, useState } from "react";
+
 import { useWindowSize } from "@hooks/common/use-window-size";
-import { useWallet } from "@hooks/wallet/use-wallet";
 import { useConnectWalletModal } from "@hooks/wallet/use-connect-wallet-modal";
+import { useWallet } from "@hooks/wallet/use-wallet";
+
+import ProposalList from "../../components/proposals-list/ProposalList";
 
 type ProposalStatus = "ACTIVE" | "REJECTED" | "PASSED" | "CANCELLED";
 export type TypeVote = "" | "YES" | "NO" | "ABSTAIN";