diff --git a/packages/sdk/README.md b/packages/sdk/README.md
new file mode 100644
index 0000000..4cdfa71
--- /dev/null
+++ b/packages/sdk/README.md
@@ -0,0 +1,62 @@
+# Gopher SDK
+
+Gopher SDK is a powerful library for interacting with blockchain networks, allowing you to retrieve information about fungible tokens, supported chains, and user balances, as well as finding solutions for asset transfers.
+
+## Installation
+
+Install the library using npm or yarn:
+
+```bash
+npm install gopher-sdk
+# or
+yarn add gopher-sdk
+```
+
+## Usage
+
+You have two approaches: using the `Gopher` class or calling API endpoints directly through the SDK.
+
+### Using the Gopher Class
+
+The `Gopher` class provides a convenient interface for interacting with the blockchain using an EIP1193 provider (e.g., MetaMask).
+
+#### Example
+
+```typescript
+import { Gopher } from 'gopher-sdk';
+
+const gopher = new Gopher(window.ethereum);
+
+gopher.getUserBalances().then(console.log);
+```
+
+### Calling API Endpoints Directly
+
+Alternatively, you can call the API endpoints directly using the provided SDK functions.
+
+#### Example
+
+```typescript
+import { api } from 'gopher-sdk';
+
+const ownerAddress = "0x3E101Ec02e7A48D16DADE204C96bFF842E7E2519";
+const tokenSymbol = "USDC";
+
+api.getUserFungibleTokens(ownerAddress, tokenSymbol).then(console.log);
+```
+
+### Environment Variables
+
+The SDK uses environment variables to configure the base URL `GOPHER_URL`. You can set this variable in your environment configuration or directly in your code.
+
+#### Setting Environment Variables in Code
+
+```typescript
+import { setBaseUrl } from 'gopher-sdk';
+
+setBaseUrl("http://localhost:8080");
+```
+
+## Contributing
+
+Contributions are welcome! Please submit a pull request or open an issue to discuss any changes.
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index ac06d0f..fee41b5 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@chainsafe/gopher-sdk",
   "version": "0.0.1",
-  "main": "index.js",
+  "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
     "build": "tsc",
@@ -13,6 +13,7 @@
   "devDependencies": {
     "@types/eslint": "^8.37.0",
     "@types/node": "18.15.11",
+    "eip1193-types": "^0.2.1",
     "eslint": "^8.37.0",
     "typescript": "^5.0.3"
   }
diff --git a/packages/sdk/src/api.ts b/packages/sdk/src/api.ts
new file mode 100644
index 0000000..cf7cab0
--- /dev/null
+++ b/packages/sdk/src/api.ts
@@ -0,0 +1,105 @@
+import {
+  Address,
+  Chain,
+  ChainID,
+  FailedSolution,
+  FungibleToken,
+  FungibleTokenBalance,
+  Solution,
+  SolutionOptions,
+  SolutionResponse,
+  TokenSymbol,
+} from "./types";
+import { getEnv } from "./utils";
+
+export let BASE_URL = getEnv(
+  "GOPHER_URL",
+  "https://gopher.test.buildwithsygma.com/"
+);
+export function setBaseUrl(url: string): void {
+  BASE_URL = url;
+}
+
+export async function getSupportedChains(): Promise<Chain[]> {
+  const url = new URL("/networks", BASE_URL);
+  const response = await fetch(url).then(
+    (response) => response.json() as unknown as { data: Chain[] }
+  );
+
+  return response.data;
+}
+
+export async function getChainTokens(
+  chainID: ChainID
+): Promise<FungibleToken[]> {
+  const url = new URL(`/networks/${chainID}/assets/fungible`, BASE_URL);
+  const response = await fetch(url).then(
+    (response) => response.json() as unknown as { data: FungibleToken[] }
+  );
+
+  return response.data;
+}
+
+export async function getFungibleTokens(): Promise<FungibleToken[]> {
+  const url = new URL("/assets/fungible", BASE_URL);
+  const response = await fetch(url).then(
+    (response) => response.json() as unknown as { data: FungibleToken[] }
+  );
+
+  return response.data;
+}
+
+export async function getFungibleToken(
+  token: TokenSymbol
+): Promise<FungibleToken> {
+  const url = new URL(`/assets/fungible/${token}`, BASE_URL);
+  return await fetch(url).then(
+    (response) => response.json() as unknown as FungibleToken
+  );
+}
+
+export async function getUserFungibleTokens(
+  address: Address,
+  token: TokenSymbol
+): Promise<FungibleTokenBalance[]> {
+  const url = new URL(
+    `/accounts/${address}/assets/fungible/${token}`,
+    BASE_URL
+  );
+  const response = await fetch(url).then(
+    (response) => response.json() as unknown as { data: FungibleTokenBalance[] }
+  );
+
+  return response.data;
+}
+
+export async function getSolution({
+  account,
+  destinationChain,
+  token,
+  amount,
+  threshold,
+  whitelistedSourceChains,
+}: SolutionOptions): Promise<SolutionResponse> {
+  const url = new URL("/solutions/aggregation", BASE_URL);
+
+  url.searchParams.set("account", account);
+  url.searchParams.set("destination", String(destinationChain));
+  url.searchParams.set("token", token);
+  url.searchParams.set("amount", String(amount));
+  //
+  if (threshold) url.searchParams.set("threshold", String(threshold));
+  if (whitelistedSourceChains?.length)
+    url.searchParams.set(
+      "whitelistedSourceChains",
+      whitelistedSourceChains.join(",")
+    );
+
+  const response = await fetch(url).then(
+    (response) =>
+      response.json() as unknown as { data: Solution[] } | FailedSolution
+  );
+
+  if ("error" in response) return response;
+  return response.data;
+}
diff --git a/packages/sdk/src/enums.ts b/packages/sdk/src/enums.ts
new file mode 100644
index 0000000..7b0fa3e
--- /dev/null
+++ b/packages/sdk/src/enums.ts
@@ -0,0 +1,3 @@
+export enum ChainType {
+  EVM = "evm",
+}
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 41265e5..5839fef 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -1,28 +1,93 @@
-import { Chain, FungibleToken, Solution, SolutionOptions } from "./types";
+import { EIP1193Provider } from "eip1193-types";
+import {
+  getFungibleTokens,
+  getSolution,
+  getSupportedChains,
+  getUserFungibleTokens,
+  setBaseUrl,
+  BASE_URL,
+} from "./api";
+import {
+  Address,
+  Chain,
+  FungibleToken,
+  FungibleTokenBalance,
+  SolutionOptions,
+  SolutionResponse,
+  TokenSymbol,
+} from "./types";
 
-export async function getSupportedChains(): Promise<Chain[]> {
-  return Promise.resolve([]);
-}
+export type * from "./types";
+export * as api from "./api";
+export * from "./enums";
 
-export async function getKnownFungibleTokens(): Promise<FungibleToken[]> {
-  return Promise.resolve([]);
-}
+class Gopher {
+  #provider: EIP1193Provider;
+
+  // local "cache"
+  #tokens?: FungibleToken[];
+  #chains?: Chain[];
+
+  constructor(provider: EIP1193Provider) {
+    this.#provider = provider;
+  }
+
+  public async getAvailableTokens(): Promise<FungibleToken[]> {
+    if (!this.#tokens) this.#tokens = await getFungibleTokens();
+    return this.#tokens;
+  }
+
+  public async getAvailableChains(): Promise<Chain[]> {
+    if (!this.#chains) this.#chains = await getSupportedChains();
+    return this.#chains;
+  }
+
+  public async getUserBalances(tokens?: FungibleToken[]): Promise<{
+    [sybol: TokenSymbol]: { balances: FungibleTokenBalance[]; total: string };
+  }> {
+    const account = await this.getAccount();
 
-export async function getSolution({
-  account,
-  destinationChain,
-  token,
-  amount,
-  threshold,
-  whitelistedSourceChains,
-}: SolutionOptions): Promise<Solution[]> {
-  console.log(
-    account,
-    destinationChain,
-    token,
-    amount,
-    threshold,
-    whitelistedSourceChains
-  );
-  return Promise.resolve([]);
+    const tokenList = tokens || (await this.getAvailableTokens());
+
+    const balances = await Promise.all(
+      tokenList.map((token) =>
+        getUserFungibleTokens(account, token.symbol).then((balances) => ({
+          symbol: token.symbol,
+          balances,
+        }))
+      )
+    );
+
+    return balances.reduce((previousValue, { symbol, balances }) => {
+      previousValue[symbol] = {
+        total: balances
+          .reduce((prev, cur) => prev + BigInt(cur.balance), 0n)
+          .toString(),
+        balances,
+      };
+      return previousValue;
+    }, {} as { [symbol: TokenSymbol]: { balances: FungibleTokenBalance[]; total: string } });
+  }
+
+  public async getSolution(
+    settings: Omit<SolutionOptions, "account">,
+    targetAccount?: Address
+  ): Promise<SolutionResponse> {
+    const account = targetAccount || (await this.getAccount());
+
+    return await getSolution({ ...settings, account });
+  }
+
+  private async getAccount(): Promise<Address> {
+    const [account] = (await this.#provider.request({
+      method: "eth_requestAccounts",
+      params: [],
+    })) as Address[];
+    if (!account)
+      throw new Error("No available account! Check your provider or something");
+
+    return account;
+  }
 }
+
+export { Gopher, setBaseUrl, BASE_URL, EIP1193Provider };
diff --git a/packages/sdk/src/types.ts b/packages/sdk/src/types.ts
index ad9b325..7d801aa 100644
--- a/packages/sdk/src/types.ts
+++ b/packages/sdk/src/types.ts
@@ -1,13 +1,76 @@
-export interface Chain {}
-export interface FungibleToken {}
+import { ChainType } from "./enums";
 
-export interface Solution {}
+export type Address = `0x${string}`;
+
+export type TokenSymbol = string;
+
+export type ChainID = number;
+
+export interface FungibleToken {
+  addresses: Record<ChainID, Address>;
+  decimals: number;
+  logoURI: string;
+  name: string;
+  symbol: TokenSymbol;
+}
+
+export interface Chain {
+  chainID: ChainID;
+  chainType: ChainType;
+  name: string;
+  logoURI: string;
+  rpcurls: string[];
+}
+
+export interface FungibleTokenBalance {
+  balance: string /* big number as string*/;
+  chainId: ChainID;
+  tokenDecimals: number;
+}
 
 export interface SolutionOptions {
-  account: string;
-  destinationChain: Chain;
-  token: FungibleToken;
-  amount: bigint;
-  threshold?: bigint;
-  whitelistedSourceChains: Chain[];
+  account: Address;
+  destinationChain: ChainID;
+  token: TokenSymbol;
+  amount: number;
+  threshold?: number;
+  whitelistedSourceChains?: ChainID[];
+}
+
+interface Amount {
+  amount: string;
+  amountUSD: number;
+}
+
+export type SolutionResponse = Solution[] | FailedSolution;
+
+export interface FailedSolution {
+  error: string;
+}
+
+export interface Solution {
+  destinationChain: ChainID;
+  destinationTokenAddress: Address;
+  duration: number /* estimation duration by seconds */;
+  fee: Amount;
+  gasCost: Amount;
+  senderAddress: Address;
+  sourceChain: ChainID;
+  sourceTokenAddress: Address;
+  amount: string;
+  tool: {
+    logoURI: string;
+    name: string;
+  };
+  transaction: Transaction;
+}
+
+export interface Transaction {
+  chainId: ChainID;
+  data: string;
+  from: Address;
+  gasLimit: string;
+  gasPrice: string;
+  to: Address;
+  value: string;
 }
diff --git a/packages/sdk/src/utils.ts b/packages/sdk/src/utils.ts
new file mode 100644
index 0000000..6d8a563
--- /dev/null
+++ b/packages/sdk/src/utils.ts
@@ -0,0 +1,16 @@
+export function getEnv(envName: string, defaultValue: string): string {
+  let variable: string | undefined;
+  try {
+    if (typeof process !== "undefined" && "env" in process)
+      variable = process.env[envName];
+    else if ("env" in import.meta) {
+      const env =
+        // @ts-expect-error
+        (import.meta.env as { [key: string]: string | undefined }) || {};
+      variable = env[envName];
+    }
+  } finally {
+    variable ??= defaultValue;
+  }
+  return variable;
+}
diff --git a/packages/sdk/tsconfig.json b/packages/sdk/tsconfig.json
index 6567c4b..0564f0c 100644
--- a/packages/sdk/tsconfig.json
+++ b/packages/sdk/tsconfig.json
@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ESNext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
@@ -25,9 +25,9 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "ESNext",                                /* Specify what module code is generated. */
      "rootDir": "./src",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+     "moduleResolution": "Bundler",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -44,7 +44,7 @@
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
     /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+     "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
diff --git a/web/package.json b/web/package.json
index eb55986..8975ca2 100644
--- a/web/package.json
+++ b/web/package.json
@@ -43,6 +43,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@chainsafe/gopher-sdk": "workspace:^",
 		"@floating-ui/dom": "^1.6.5",
 		"date-fns": "^3.6.0",
 		"highlight.js": "11.9.0",
diff --git a/web/src/lib/components/Account.svelte b/web/src/lib/components/Account.svelte
index 0260067..2039299 100644
--- a/web/src/lib/components/Account.svelte
+++ b/web/src/lib/components/Account.svelte
@@ -4,19 +4,13 @@
 
 	$: address = $selectedProvider.provider.request({ method: 'eth_requestAccounts', params: [] });
 
-	export let promise: Promise<object>;
-
 	const drawerStore = getDrawerStore();
-
 	async function openSendDrawer() {
-		const data = await promise;
-
 		const drawerSettings: DrawerSettings = {
 			id: 'SendTokens',
 			width: 'w-[518px]',
 			position: 'right',
 			meta: {
-				...data.raw,
 				title: 'Send Tokens'
 			}
 		};
diff --git a/web/src/lib/components/DrawerManager.svelte b/web/src/lib/components/DrawerManager.svelte
index e9d842d..ae3aa4a 100644
--- a/web/src/lib/components/DrawerManager.svelte
+++ b/web/src/lib/components/DrawerManager.svelte
@@ -7,8 +7,6 @@
 	const close = () => {
 		drawerStore.close();
 	};
-
-	$: console.log($drawerStore);
 </script>
 
 <Drawer>
diff --git a/web/src/lib/components/Facepile.svelte b/web/src/lib/components/Facepile.svelte
index c3d264d..f806427 100644
--- a/web/src/lib/components/Facepile.svelte
+++ b/web/src/lib/components/Facepile.svelte
@@ -1,19 +1,25 @@
 <script lang="ts">
-	export let balances;
-	export let networks;
+	import type { Chain, FungibleTokenBalance } from '@chainsafe/gopher-sdk';
 
-	$: list = balances.reduce((previousValue, { balance, chainId }) => {
-		if (balance != '0') {
-			const network = networks.get(chainId); // not having types yet! { name, logoURI }
-			previousValue.push({
-				balance: BigInt(balance),
-				chainId,
-				name: network.name,
-				logo: network.logoURI
-			});
-		}
-		return previousValue;
-	}, []);
+	export let balances: FungibleTokenBalance[];
+	export let networks: Chain[];
+
+	$: list = balances.reduce(
+		(previousValue, { balance, chainId }) => {
+			if (balance != '0') {
+				const network = networks.find((network) => network.chainID === chainId);
+				if (network)
+					previousValue.push({
+						balance: BigInt(balance),
+						chainId,
+						name: network.name,
+						logo: network.logoURI
+					});
+			}
+			return previousValue;
+		},
+		[] as { logo: string; name: string; balance: bigint; chainId: number }[]
+	);
 </script>
 
 <div class="flex -space-x-2">
diff --git a/web/src/lib/components/Portfolio.svelte b/web/src/lib/components/Portfolio.svelte
index 5db05d2..38df635 100644
--- a/web/src/lib/components/Portfolio.svelte
+++ b/web/src/lib/components/Portfolio.svelte
@@ -3,25 +3,32 @@
 	import Facepile from '$lib/components/Facepile.svelte';
 	import { getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	import TokenModal from '$lib/components/TokenModal.svelte';
+	import { gopher } from '$lib/stores/gopher';
 
-	export let promise: Promise<object>;
+	const modalStore = getModalStore();
 
-	$: total = promise.then(({ tokens }) =>
-		tokens.reduce((p, c) => p + Number(fromWei(c.total, c.decimals)), 0)
-	);
+	const tokens = $gopher.getAvailableTokens();
+	const balances = $gopher.getUserBalances();
+	const chains = $gopher.getAvailableChains();
 
-	const modalStore = getModalStore();
+	$: total = balances.then((b) =>
+		Object.values(b).reduce(
+			(p, c) => (p += Number(fromWei(c.total, c.balances[0].tokenDecimals))),
+			0
+		)
+	);
 
 	async function handleListClick(index: number) {
-		const data = await promise;
-		const token = data.tokens[index];
+		const networks = await chains;
+		const token = (await tokens)[index];
+		const selectedBalances = (await balances)[token.symbol];
 
 		const modal: ModalSettings = {
 			type: 'component',
 			component: { ref: TokenModal },
 			title: token.name,
 			buttonTextCancel: 'close',
-			value: { networks: data.raw.networks, balances: token.balances },
+			value: { networks, balances: selectedBalances.balances },
 			meta: { icon: token.logoURI, sybol: token.symbol, decimals: token.decimals }
 		};
 		modalStore.trigger(modal);
@@ -63,7 +70,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					{#await promise}
+					{#await Promise.all([tokens, balances, chains])}
 						<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
 						{#each { length: 3 } as _}
 							<tr class="pt-2">
@@ -72,8 +79,8 @@
 								<td><div class="placeholder h-8" /></td>
 							</tr>
 						{/each}
-					{:then data}
-						{#each data.tokens as token, i}
+					{:then [tokens, balances, chains]}
+						{#each tokens as token, i}
 							<tr
 								class="pt-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
 								on:click={() => handleListClick(i)}
@@ -89,11 +96,11 @@
 									</div>
 								</td>
 								<td class="text-slate-700 dark:text-slate-300 text-base text-left">
-									{fromWei(token.total, token.decimals)}
+									{fromWei(balances[token.symbol].total, token.decimals)}
 									{token.symbol}
 								</td>
 								<td class="text-slate-700 dark:text-slate-300 text-base">
-									<Facepile balances={token.balances} networks={data.raw.networks} />
+									<Facepile balances={balances[token.symbol].balances} networks={chains} />
 								</td>
 							</tr>
 						{/each}
diff --git a/web/src/lib/components/SendTokensDrawer.svelte b/web/src/lib/components/SendTokensDrawer.svelte
index 16b5962..3036630 100644
--- a/web/src/lib/components/SendTokensDrawer.svelte
+++ b/web/src/lib/components/SendTokensDrawer.svelte
@@ -10,8 +10,14 @@
 		type DrawerSettings
 	} from '@skeletonlabs/skeleton';
 	import { onMount } from 'svelte';
-	import { hacks_getChainIcon } from '$lib/hacks';
 	import { fromWei, toWei } from 'web3-utils';
+	import { gopher } from '$lib/stores/gopher';
+	import { getNetworkByChainId, getTokenBySymbol } from '$lib/utils';
+	import { type FungibleToken, type FungibleTokenBalance } from '@chainsafe/gopher-sdk';
+
+	const tokens = $gopher.getAvailableTokens();
+	const allBalances = $gopher.getUserBalances();
+	const chains = $gopher.getAvailableChains();
 
 	const drawerStore = getDrawerStore();
 
@@ -31,32 +37,36 @@
 	};
 
 	onMount(() => {
-		selectedToken = $drawerStore.meta.tokens.values().next().value.symbol;
+		tokens.then(([firstToken]) => {
+			selectedToken = firstToken.symbol;
+		});
 	});
 
-	let balances;
-	let tokenInfo;
-	function updateWhitelistedOnTokenChange() {
-		tokenInfo = $drawerStore.meta.tokens.get(selectedToken);
+	let balances: FungibleTokenBalance[] = [];
+	let tokenInfo: FungibleToken;
+	async function updateWhitelistedOnTokenChange() {
+		tokenInfo = getTokenBySymbol(await tokens, selectedToken);
 
-		balances = $drawerStore.meta.balances.get(selectedToken) ?? [];
-		whitelisted = balances.map((balance) => balance.chainId);
+		balances = (await allBalances)[selectedToken].balances ?? [];
+		whitelisted = balances.map((balance) => String(balance.chainId));
 	}
 	$: if (selectedToken) {
 		updateWhitelistedOnTokenChange();
 	}
 
-	function requestQuota() {
+	async function requestQuota() {
 		const drawerSettings: DrawerSettings = {
 			id: 'SubmitQuota',
 			width: 'w-[518px]',
 			position: 'right',
 			meta: {
-				...$drawerStore.meta,
 				title: 'Submit Quotas',
+				tokens: await tokens,
+				chains: await chains,
+				balances,
 				quota: {
 					token: selectedToken,
-					network: selectedNetwork,
+					destinationChain: selectedNetwork,
 					whitelisted,
 					amount: toWei(amount, tokenInfo.decimals),
 					threshold: threshold ? toWei(threshold, tokenInfo.decimals) : undefined
@@ -112,16 +122,20 @@
 					</button>
 					<div class="card w-48 shadow-xl py-2" data-popup="popupCombobox">
 						<ListBox rounded="rounded-none">
-							{#each $drawerStore.meta.tokens.values() as token}
-								<ListBoxItem bind:group={selectedToken} name="medium" value={token.symbol}>
-									<img
-										class="inline-block size-5 rounded-full mr-1"
-										src={token.logoURI}
-										alt={token.name}
-									/>
-									{token.name}
-								</ListBoxItem>
-							{/each}
+							{#await tokens}
+								Loading....
+							{:then data}
+								{#each data as token}
+									<ListBoxItem bind:group={selectedToken} name="medium" value={token.symbol}>
+										<img
+											class="inline-block size-5 rounded-full mr-1"
+											src={token.logoURI}
+											alt={token.name}
+										/>
+										{token.name}
+									</ListBoxItem>
+								{/each}
+							{/await}
 						</ListBox>
 						<div class="arrow bg-surface-100-800-token" />
 					</div>
@@ -147,9 +161,13 @@
 		class="self-stretch px-4 py-3 rounded-lg border border-zinc-200 dark:border-gray-600 flex-col justify-center items-start gap-1 flex text-zinc-800 dark:text-zinc-200 text-lg font-medium font-['Inter'] leading-relaxed bg-transparent"
 		bind:value={selectedNetwork}
 	>
-		{#each $drawerStore.meta.networks.values() as network}
-			<option value={network.chainID}>{network.name}</option>
-		{/each}
+		{#await chains}
+			<option disabled>Loading...</option>
+		{:then networks}
+			{#each networks as network}
+				<option value={network.chainID}>{network.name}</option>
+			{/each}
+		{/await}
 	</select>
 </div>
 
@@ -192,25 +210,24 @@
 						<svelte:fragment slot="summary">WHITELIST A NETWORK</svelte:fragment>
 						<svelte:fragment slot="content">
 							<ListBox multiple>
-								{#each balances as balance}
-									<ListBoxItem
-										bind:group={whitelisted}
-										name={$drawerStore.meta.networks.get(balance.chainId).name}
-										value={balance.chainId}
-									>
-										<svelte:fragment slot="lead">
-											<img
-												class="size-6"
-												src={hacks_getChainIcon(balance.chainId)}
-												alt={`${balance.chainId}-LOGO`}
-											/>
-										</svelte:fragment>
-										{$drawerStore.meta.networks.get(balance.chainId).name}
-										<svelte:fragment slot="trail">
-											{fromWei(balance.balance, tokenInfo.decimals)}
-										</svelte:fragment>
-									</ListBoxItem>
-								{/each}
+								{#await chains then networks}
+									{#each balances as balance}
+										{@const network = getNetworkByChainId(networks, balance.chainId)}
+										<ListBoxItem
+											bind:group={whitelisted}
+											name={getNetworkByChainId(networks, balance.chainId).name}
+											value={String(balance.chainId)}
+										>
+											<svelte:fragment slot="lead">
+												<img class="size-6" src={network.logoURI} alt={`${balance.chainId}-LOGO`} />
+											</svelte:fragment>
+											{network.name}
+											<svelte:fragment slot="trail">
+												{fromWei(balance.balance, tokenInfo.decimals)}
+											</svelte:fragment>
+										</ListBoxItem>
+									{/each}
+								{/await}
 							</ListBox>
 						</svelte:fragment>
 					</AccordionItem>
diff --git a/web/src/lib/components/SubmitTokensDrawer.svelte b/web/src/lib/components/SubmitTokensDrawer.svelte
index 71ccaff..51c47fa 100644
--- a/web/src/lib/components/SubmitTokensDrawer.svelte
+++ b/web/src/lib/components/SubmitTokensDrawer.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
 	import { fromWei, toHex } from 'web3-utils';
 	import { formatDuration } from '$lib/formatters';
-	import { hacks_getQuota } from '$lib/hacks';
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
 	import { selectedProvider } from '$lib/stores/wallet';
 	import { type NonPayableCallOptions, Web3 } from 'web3';
 	import { erc20Abi } from '$lib/erc20.abi';
+	import { gopher } from '$lib/stores/gopher';
+	import { getNetworkByChainId, getTokenBySymbol } from '$lib/utils';
+	import { type Solution } from '@chainsafe/gopher-sdk';
+	import SkullCrossbonesSolid from '$lib/icons/SkullCrossbonesSolid.svelte';
 
 	const drawerStore = getDrawerStore();
-	$: quota = hacks_getQuota($drawerStore.meta.quota);
-	$: token = $drawerStore.meta.tokens.get($drawerStore.meta.quota.token);
+	$: quota = $gopher.getSolution($drawerStore.meta.quota);
+	$: token = getTokenBySymbol($drawerStore.meta.tokens, $drawerStore.meta.quota.token);
 
 	const submitting: boolean[] = [];
 	const successful: boolean[] = [];
 	// TODO: there is not place for this over here! refactor it to somewhere
-	async function submitTransaction(quotaRecord: object, index: number) {
+	async function submitTransaction(quotaRecord: Solution, index: number) {
 		try {
 			submitting[index] = true;
 
@@ -31,7 +34,7 @@
 				});
 			} catch (error) {
 				if (error.code === 4902) {
-					const network = $drawerStore.meta.networks.get(quotaRecord.sourceChain);
+					const network = getNetworkByChainId($drawerStore.meta.chains, quotaRecord.sourceChain);
 					await $selectedProvider.provider.request({
 						method: 'wallet_addEthereumChain',
 						params: [
@@ -98,61 +101,71 @@
 				<div class="placeholder h-[68px] w-full rounded-lg" />
 			</li>
 		{:then response}
-			{#each response.data as data, index}
-				{@const network = $drawerStore.meta.networks.get(data.sourceChain)}
-				{@const balance = $drawerStore.meta.balances
-					.get(token.symbol)
-					.find(({ chainId }) => chainId === data.sourceChain)}
-				<li
-					class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg flex justify-between items-center mb-4"
-				>
-					<div class="flex items-center">
-						<img src={network.logoURI} alt="Source Chain Icon" class="w-8 h-8 mr-2" />
-						<div>
-							<p class="text-lg font-semibold text-black dark:text-white">
-								{fromWei(data.amount, token.decimals)}
-								{token.name} on {network.name}
-							</p>
-							<p class="text-sm text-gray-600 dark:text-gray-400">
-								Balance: {fromWei(balance.balance, token.decimals)}
-								{token.name}
-							</p>
-							<p class="text-sm text-gray-600 dark:text-gray-400">
-								Fee: {data.fee.amountUSD} USD
-							</p>
-						</div>
-					</div>
-					<div class="flex flex-col items-center justify-center h-full">
-						{#if !successful[index]}
-							<button
-								class="border border-blue-500 text-blue-500 text-xs px-2 py-1 rounded mb-1 dark:border-blue-300 dark:text-blue-300"
-								disabled={submitting[index]}
-								on:click={() => submitTransaction(data, index)}
-							>
-								Submit & Send
-							</button>
-							<p class="text-gray-400 dark:text-gray-500 text-xs">
-								Estimated Time {formatDuration(data.duration)}
-							</p>
-						{:else}
-							<svg
-								class="w-6 h-6 text-green-500 dark:text-green-300"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M5 13l4 4L19 7"
-								></path>
-							</svg>
-						{/if}
+			{#if 'error' in response}
+				<div class="alert variant-soft-error">
+					<SkullCrossbonesSolid class="h-10 w-10 fill-error-800 opacity-75" />
+					<div class="alert-message">
+						<h3 class="h3">Error</h3>
+						<p>{response.error}</p>
 					</div>
-				</li>
-			{/each}
+				</div>
+			{:else}
+				{#each response as data, index}
+					{@const network = getNetworkByChainId($drawerStore.meta.chains, data.sourceChain)}
+					{@const balance = $drawerStore.meta.balances.find(
+						({ chainId }) => chainId === data.sourceChain
+					)}
+					<li
+						class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg flex justify-between items-center mb-4"
+					>
+						<div class="flex items-center">
+							<img src={network.logoURI} alt="Source Chain Icon" class="w-8 h-8 mr-2" />
+							<div>
+								<p class="text-lg font-semibold text-black dark:text-white">
+									{fromWei(data.amount, token.decimals)}
+									{token.name} on {network.name}
+								</p>
+								<p class="text-sm text-gray-600 dark:text-gray-400">
+									Balance: {fromWei(balance.balance, token.decimals)}
+									{token.name}
+								</p>
+								<p class="text-sm text-gray-600 dark:text-gray-400">
+									Fee: {data.fee.amountUSD} USD
+								</p>
+							</div>
+						</div>
+						<div class="flex flex-col items-center justify-center h-full">
+							{#if !successful[index]}
+								<button
+									class="border border-blue-500 text-blue-500 text-xs px-2 py-1 rounded mb-1 dark:border-blue-300 dark:text-blue-300"
+									disabled={submitting[index]}
+									on:click={() => submitTransaction(data, index)}
+								>
+									Submit & Send
+								</button>
+								<p class="text-gray-400 dark:text-gray-500 text-xs">
+									Estimated Time {formatDuration(data.duration)}
+								</p>
+							{:else}
+								<svg
+									class="w-6 h-6 text-green-500 dark:text-green-300"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 13l4 4L19 7"
+									></path>
+								</svg>
+							{/if}
+						</div>
+					</li>
+				{/each}
+			{/if}
 		{:catch error}
 			<p style="color: red">{error.message}</p>
 		{/await}
@@ -164,7 +177,7 @@
 >
 	<button
 		on:click={() => {
-			quota = hacks_getQuota($drawerStore.meta.quota);
+			quota = $gopher.getSolution($drawerStore.meta.quota);
 		}}
 		class="w-full h-10 p-2.5 bg-white dark:bg-gray-700 rounded-[10px] shadow border border-zinc-200 dark:border-gray-600 justify-center items-center gap-1 inline-flex"
 	>
diff --git a/web/src/lib/components/TokenModal.svelte b/web/src/lib/components/TokenModal.svelte
index 5f8f25c..710beaa 100644
--- a/web/src/lib/components/TokenModal.svelte
+++ b/web/src/lib/components/TokenModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { SvelteComponent } from 'svelte';
 	import { getModalStore } from '@skeletonlabs/skeleton';
-	import { hacks_getChainIcon } from '$lib/hacks';
 	import { fromWei } from 'web3-utils';
+	import { getNetworkByChainId } from '$lib/utils';
 
 	// Props
 	/** Exposes parent props to this component. */
@@ -38,9 +38,10 @@
 					</thead>
 					<tbody>
 						{#each $modalStore[0].value.balances as balance}
+							{@const network = getNetworkByChainId($modalStore[0].value.networks, balance.chainId)}
 							<tr>
-								<td><img class="size-7" src={hacks_getChainIcon(balance.chainId)} alt="" /></td>
-								<td>{$modalStore[0].value.networks.get(balance.chainId).name}</td>
+								<td><img class="size-7" src={network.logoURI} alt="{network.name}-logo" /></td>
+								<td>{network.name}</td>
 								<td>{fromWei(balance.balance, $modalStore[0].meta.decimals)}</td>
 							</tr>
 						{/each}
@@ -49,9 +50,9 @@
 			</div>
 		</article>
 		<footer class="modal-footer {parent.regionFooter}">
-			<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}
-				>{parent.buttonTextCancel}</button
-			>
+			<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>
+				{parent.buttonTextCancel}
+			</button>
 		</footer>
 	</div>
 {/if}
diff --git a/web/src/lib/hacks.ts b/web/src/lib/hacks.ts
deleted file mode 100644
index b69e59e..0000000
--- a/web/src/lib/hacks.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { get } from 'svelte/store';
-import { selectedProvider } from '$lib/stores/wallet';
-
-export function hacks_getChainIcon(id: number): string {
-	switch (id) {
-		case 1:
-			return 'https://icons.llamao.fi/icons/chains/rsz_ethereum.jpg';
-		case 42161:
-			return 'https://icons.llamao.fi/icons/chains/rsz_arbitrum.jpg';
-		case 10:
-			return 'https://icons.llamao.fi/icons/chains/rsz_optimism.jpg';
-		case 137:
-			return 'https://icons.llamao.fi/icons/chains/rsz_polygon.jpg';
-		case 8453:
-			return 'https://icons.llamao.fi/icons/chains/rsz_base.jpg';
-		case 43114:
-			return 'https://icons.llamao.fi/icons/chains/rsz_avalanche.jpg';
-		case 100:
-			return 'https://icons.llamao.fi/icons/chains/rsz_xdai.jpg';
-		default:
-			return 'https://images.emojiterra.com/google/noto-emoji/unicode-15.1/color/svg/1f937-2642.svg';
-	}
-}
-
-function getProvider() {
-	const storeProvider = get(selectedProvider);
-	if (!storeProvider) return;
-
-	return storeProvider.provider;
-}
-
-export async function hacks_getGopherData(): Promise<object> {
-	const networksResponse = await fetch('https://gopher.test.buildwithsygma.com/networks').then(
-		(r) => r.json()
-	);
-	const networks = networksResponse.data.reduce(
-		(prev, network) => prev.set(network.chainID, network),
-		new Map<number, object>()
-	);
-
-	const fungibleResponses = await Promise.all(
-		networks
-			.keys()
-			.map((key) =>
-				fetch(`https://gopher.test.buildwithsygma.com/networks/${key}/assets/fungible`).then((r) =>
-					r.json()
-				)
-			)
-	);
-
-	const tokens = new Map<string, object>();
-	fungibleResponses.forEach((response) => {
-		response.data.forEach((asset) => {
-			if (tokens.has(asset.symbol)) return;
-			tokens.set(asset.symbol, asset);
-		});
-	});
-
-	const account = await getProvider().request({ method: 'eth_requestAccounts', params: [] });
-	const balancesResponses = await Promise.all(
-		tokens.keys().map((key) =>
-			fetch(`https://gopher.test.buildwithsygma.com/accounts/${account}/assets/fungible/${key}`)
-				.then((r) => r.json())
-				.then((r) => ({ symbol: key, ...r }))
-		)
-	);
-
-	const balances = new Map<string, object[]>();
-	balancesResponses.forEach((balance) => {
-		balances.set(balance.symbol, balance.data);
-	});
-
-	const tokensData = [...tokens.keys()].map((key) => {
-		const tokenData = tokens.get(key);
-		const balanceData = balances.get(key);
-
-		const totalBalance = balanceData.reduce((prev, cur) => prev + Number(cur.balance), 0);
-		return { ...tokenData, balances: balanceData, total: totalBalance };
-	});
-
-	return { raw: { networks, tokens, balances }, tokens: tokensData };
-}
-
-export async function hacks_getQuota(value: object) {
-	const url = new URL('https://gopher.test.buildwithsygma.com/solutions/aggregation');
-
-	const account = await getProvider().request({ method: 'eth_requestAccounts', params: [] });
-	url.searchParams.set('account', account[0]);
-
-	url.searchParams.set('destination', value.network);
-	url.searchParams.set('token', value.token);
-	url.searchParams.set('amount', value.amount);
-	//
-	if (value.whitelisted) url.searchParams.set('whitelistedSourceChains', value.whitelisted);
-	if (value.threshold) url.searchParams.set('threshold', value.threshold);
-
-	return await fetch(url.toString()).then((response) =>
-		response.json().then((json) => {
-			if (response.ok) return json;
-			throw new Error(JSON.stringify(json));
-		})
-	);
-}
diff --git a/web/src/lib/icons/SkullCrossbonesSolid.svelte b/web/src/lib/icons/SkullCrossbonesSolid.svelte
new file mode 100644
index 0000000..9393965
--- /dev/null
+++ b/web/src/lib/icons/SkullCrossbonesSolid.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...$$props}
+	><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path
+		d="M368 128c0 44.4-25.4 83.5-64 106.4V256c0 17.7-14.3 32-32 32H176c-17.7 0-32-14.3-32-32V234.4c-38.6-23-64-62.1-64-106.4C80 57.3 144.5 0 224 0s144 57.3 144 128zM168 176a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM3.4 273.7c7.9-15.8 27.1-22.2 42.9-14.3L224 348.2l177.7-88.8c15.8-7.9 35-1.5 42.9 14.3s1.5 35-14.3 42.9L295.6 384l134.8 67.4c15.8 7.9 22.2 27.1 14.3 42.9s-27.1 22.2-42.9 14.3L224 419.8 46.3 508.6c-15.8 7.9-35 1.5-42.9-14.3s-1.5-35 14.3-42.9L152.4 384 17.7 316.6C1.9 308.7-4.5 289.5 3.4 273.7z"
+	/></svg
+>
diff --git a/web/src/lib/stores/gopher.ts b/web/src/lib/stores/gopher.ts
new file mode 100644
index 0000000..29fe72a
--- /dev/null
+++ b/web/src/lib/stores/gopher.ts
@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+import { Gopher } from '@chainsafe/gopher-sdk';
+import { selectedProvider } from '$lib/stores/wallet';
+
+export const gopher = writable<Gopher>();
+
+selectedProvider.subscribe((event) => {
+	if (event) gopher.set(new Gopher(event.provider));
+});
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 0000000..c1a3f9e
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,31 @@
+import {
+	type Chain,
+	type ChainID,
+	ChainType,
+	type FungibleToken,
+	type TokenSymbol
+} from '@chainsafe/gopher-sdk';
+
+const noNetworkFound: Chain = {
+	chainID: 0,
+	chainType: ChainType.EVM,
+	name: 'none',
+	logoURI: 'https://static.thenounproject.com/png/75231-200.png',
+	rpcurls: []
+};
+
+export function getNetworkByChainId(networks: Chain[], chainId: ChainID) {
+	return networks.find((network) => network.chainID === chainId) || noNetworkFound;
+}
+
+const noTokenFound: FungibleToken = {
+	addresses: {},
+	decimals: 0,
+	logoURI: 'https://static.thenounproject.com/png/75231-200.png',
+	name: 'none',
+	symbol: 'none'
+};
+
+export function getTokenBySymbol(tokens: FungibleToken[], symbol: TokenSymbol) {
+	return tokens.find((token) => token.symbol === symbol) || noTokenFound;
+}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 6c7ac34..5c65d54 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
 	import Portfolio from '$lib/components/Portfolio.svelte';
 	import Account from '$lib/components/Account.svelte';
-	import { hacks_getGopherData } from '$lib/hacks';
-
-	const promise = hacks_getGopherData();
 </script>
 
 <div class="container h-full mx-auto flex justify-center items-center">
 	<div class="space-y-10 text-center flex flex-col items-center">
-		<Account {promise} />
-		<Portfolio {promise} />
+		<Account />
+		<Portfolio />
 	</div>
 </div>
 
diff --git a/yarn.lock b/yarn.lock
index 8106ddb..71f1d6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,12 +46,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chainsafe/gopher-sdk@workspace:packages/sdk":
+"@chainsafe/gopher-sdk@workspace:^, @chainsafe/gopher-sdk@workspace:packages/sdk":
   version: 0.0.0-use.local
   resolution: "@chainsafe/gopher-sdk@workspace:packages/sdk"
   dependencies:
     "@types/eslint": ^8.37.0
     "@types/node": 18.15.11
+    eip1193-types: ^0.2.1
     eslint: ^8.37.0
     typescript: ^5.0.3
   languageName: unknown
@@ -2228,6 +2229,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eip1193-types@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "eip1193-types@npm:0.2.1"
+  checksum: 423723535a890ab44d6b7c88815b9c8df48ec269f3386943fd37e6db55fcca11f9bc8b9fbae30f821db18c1b95d4a0631aa51d9a99a82d4f09bdcd43a766e2fc
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.4.668":
   version: 1.4.772
   resolution: "electron-to-chromium@npm:1.4.772"
@@ -6543,6 +6551,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "web@workspace:web"
   dependencies:
+    "@chainsafe/gopher-sdk": "workspace:^"
     "@floating-ui/dom": ^1.6.5
     "@skeletonlabs/skeleton": 2.10.0
     "@skeletonlabs/tw-plugin": 0.4.0