diff --git a/README.md b/README.md
index 819055957..1b51bccbf 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Gnoswap Interface
+# Gnoswap Interface 
 Welcome to the open source interface for Gnoswap, the first decentralized exchange (DEX) powered by Gnoland, designed to simplify concentrated liquidity experience and increase capital efficiency for traders.
 
 _Note: Gnoswap is in active development and not yet in production, and we welcome your contributions! Please check our [contribution guidelines](https://github.com/gnoswap-labs/gnoswap-interface#contributing--support) and the [latest release](https://github.com/gnoswap-labs/gnoswap-interface/releases) to see the current development status._
diff --git a/packages/web/src/hooks/common/useForceRefetchQuery.tsx b/packages/web/src/hooks/common/useForceRefetchQuery.tsx
new file mode 100644
index 000000000..6674e64cf
--- /dev/null
+++ b/packages/web/src/hooks/common/useForceRefetchQuery.tsx
@@ -0,0 +1,7 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+export const useForceRefetchQuery = () => {
+  const client = useQueryClient();
+
+  return client.invalidateQueries.bind(client);
+};
diff --git a/packages/web/src/react-query/token/index.ts b/packages/web/src/react-query/token/index.ts
new file mode 100644
index 000000000..e9cf2f510
--- /dev/null
+++ b/packages/web/src/react-query/token/index.ts
@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./queries";
diff --git a/packages/web/src/react-query/token/queries.ts b/packages/web/src/react-query/token/queries.ts
new file mode 100644
index 000000000..1bc8bc54e
--- /dev/null
+++ b/packages/web/src/react-query/token/queries.ts
@@ -0,0 +1,28 @@
+import { TokenListResponse, TokenPriceListResponse } from "@repositories/token";
+import { UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
+import { QUERY_KEY } from "./types";
+
+export const useGetTokensList = (
+  options?: UseQueryOptions<TokenListResponse, Error>
+) => {
+  const { tokenRepository } = useGnoswapContext();
+
+  return useQuery<TokenListResponse, Error>({
+    queryKey: [QUERY_KEY.tokens],
+    queryFn: () => tokenRepository.getTokens(),
+    enabled: false,
+    ...options,
+  });
+};
+
+export const useGetTokenPrices = (
+  options?: UseQueryOptions<TokenPriceListResponse, Error>
+) => {
+  const { tokenRepository } = useGnoswapContext();
+  return useQuery<TokenPriceListResponse, Error>({
+    queryKey: [QUERY_KEY.tokenPrices],
+    queryFn: () => tokenRepository.getTokenPrices(),
+    ...options,
+  });
+};
diff --git a/packages/web/src/react-query/token/types.ts b/packages/web/src/react-query/token/types.ts
new file mode 100644
index 000000000..06f41fce7
--- /dev/null
+++ b/packages/web/src/react-query/token/types.ts
@@ -0,0 +1,7 @@
+export interface IExampleTypeRequest {}
+export interface IExampleTypeResponse {}
+
+export enum QUERY_KEY {
+  tokens = "tokens",
+  tokenPrices = "token_prices",
+}