diff --git a/packages/nextjs/app/hooks/_components/HooksCards.tsx b/packages/nextjs/app/hooks/HookDetails.tsx
similarity index 70%
rename from packages/nextjs/app/hooks/_components/HooksCards.tsx
rename to packages/nextjs/app/hooks/HookDetails.tsx
index 898bd39f..0a848771 100644
--- a/packages/nextjs/app/hooks/_components/HooksCards.tsx
+++ b/packages/nextjs/app/hooks/HookDetails.tsx
@@ -2,10 +2,11 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { type HookDetails } from "../page";
+import { type HookInfo } from "./page";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import Modal from "~~/components/common/Modal";
 
-export const HooksCards = ({ hooks }: { hooks: HookDetails[] }) => {
+export const HooksDetails = ({ hooks }: { hooks: HookInfo[] }) => {
   const [activeModal, setActiveModal] = useState<number | null>(null);
 
   const modalContent = (id: number) => {
@@ -14,12 +15,16 @@ export const HooksCards = ({ hooks }: { hooks: HookDetails[] }) => {
     if (!hook) return null;
     const categories = hook.category.join(", ");
     return (
-      <div className="text-lg">
-        <h1 className="text-3xl font-bold mb-1">{hook.title}</h1>
-        <div className="">Created By {hook.created_by}</div>
-        <p className="text-xl">{hook.description}</p>
-        <div>Audited: {hook.audited}</div>
+      <div className="text-lg  flex flex-col gap-10">
+        <div>
+          <h1 className="text-3xl font-bold mb-1">{hook.title}</h1>
+          <div>Created By {hook.created_by}</div>
+        </div>
+
+        <div className="text-xl">{hook.description}</div>
+
         <div className="flex justify-between">
+          <div>Audited: {hook.audited}</div>
           <div>Categories: {categories}</div>
           <Link
             href={hook.github}
@@ -39,24 +44,24 @@ export const HooksCards = ({ hooks }: { hooks: HookDetails[] }) => {
       {hooks.map(hook => (
         <div
           key={hook.id}
-          className="bg-base-200 hover:bg-base-100 p-5 rounded-lg w-full hover:cursor-pointer grid grid-cols-8"
+          className="text-lg bg-base-200 hover:bg-base-100 p-5 rounded-lg w-full hover:cursor-pointer  grid grid-cols-5 shadow-md"
           onClick={() => setActiveModal(hook.id)}
         >
-          <div className="col-start-1 col-end-3 text-xl font-bold ">{hook.title}</div>
+          <div className="col-span-full lg:col-start-1 lg:col-end-3 text-xl font-bold ">{hook.title}</div>
 
-          <div className="hidden md:flex col-start-4 col-end-6 text-center">
+          <div className="hidden lg:flex text-center">
             <Link
-              className="flex gap-2 items-center text-nowrap overflow-hidden whitespace-nowrap"
+              className="hover:underline flex gap-2 items-center text-nowrap overflow-hidden whitespace-nowrap"
               target="_blank"
               rel="noopener noreferrer"
               href={hook.github}
             >
-              {hook.github.slice(0, 40)}...
+              github <ArrowTopRightOnSquareIcon className="w-4 h-4" />
             </Link>
           </div>
 
-          <div className="col-start-7 col-end-7">{hook.category}</div>
-          <div className="col-start-8 col-end-8">{hook.created_by}</div>
+          <div className="hidden lg:flex">{hook.category}</div>
+          <div className="hidden lg:flex">{hook.created_by}</div>
         </div>
       ))}
 
diff --git a/packages/nextjs/app/hooks/page.tsx b/packages/nextjs/app/hooks/page.tsx
index fae95863..15dbc20e 100644
--- a/packages/nextjs/app/hooks/page.tsx
+++ b/packages/nextjs/app/hooks/page.tsx
@@ -1,8 +1,8 @@
 import Link from "next/link";
-import { HooksCards } from "./_components/HooksCards";
+import { HooksDetails } from "./HookDetails";
 import type { NextPage } from "next";
 
-export type HookDetails = {
+export type HookInfo = {
   id: number;
   title: string;
   source: string;
@@ -15,7 +15,7 @@ export type HookDetails = {
 };
 
 const Hooks: NextPage = async () => {
-  let hooks: HookDetails[] | null = null;
+  let hooks: HookInfo[] | null = null;
   const response = await fetch("https://raw.githubusercontent.com/burns2854/balancer-hooks/main/hook-data.json");
   if (response.ok) {
     hooks = await response.json();
@@ -40,13 +40,13 @@ const Hooks: NextPage = async () => {
         </div>
       </div>
       <div className="w-full flex flex-col gap-3">
-        <div className="w-full grid grid-cols-8 font-bold text-lg">
-          <div className="col-start-1 col-end-4">Name</div>
-          <div className="col-start-4 col-end-6 text-start hidden md:flex">Repo URL</div>
-          <div className="col-start-7 col-end-7">Category</div>
-          <div className="col-start-8 col-end-8">Created By</div>
+        <div className="w-full grid grid-cols-5 font-bold text-lg">
+          <div className="col-auto lg:col-start-1 lg:col-end-3">Name</div>
+          <div className="hidden lg:flex">Repo URL</div>
+          <div className="hidden lg:flex">Category</div>
+          <div className="hidden lg:flex">Created By</div>
         </div>
-        {hooks ? <HooksCards hooks={hooks} /> : <div className="text-xl text-error">Error fetching hooks data!</div>}
+        {hooks ? <HooksDetails hooks={hooks} /> : <div className="text-xl text-error">Error fetching hooks data!</div>}
       </div>
     </div>
   );
diff --git a/packages/nextjs/app/hooks/types.ts b/packages/nextjs/app/hooks/types.ts
new file mode 100644
index 00000000..7fca25af
--- /dev/null
+++ b/packages/nextjs/app/hooks/types.ts
@@ -0,0 +1,11 @@
+export type HookDetails = {
+  id: number;
+  title: string;
+  source: string;
+  description: string;
+  github: string;
+  additional_link: string;
+  created_by: string;
+  audited: "Yes" | "No";
+  category: string[];
+};
diff --git a/packages/nextjs/app/pools/_components/PoolPageSkeleton.tsx b/packages/nextjs/app/pools/_components/PoolPageSkeleton.tsx
new file mode 100644
index 00000000..c12e36b9
--- /dev/null
+++ b/packages/nextjs/app/pools/_components/PoolPageSkeleton.tsx
@@ -0,0 +1,29 @@
+import { SkeletonLoader } from "~~/components/common";
+
+export const PoolPageSkeleton = () => {
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-1 xl:grid-cols-2 w-full gap-7 mb-5 mt-20">
+        <div className="flex flex-col gap-7">
+          <div className="w-full h-72">
+            <SkeletonLoader />
+          </div>
+          <div className="w-full h-48">
+            <SkeletonLoader />
+          </div>
+          <div className="w-full h-96">
+            <SkeletonLoader />
+          </div>
+        </div>
+        <div className="flex flex-col gap-7">
+          <div className="w-full h-96">
+            <SkeletonLoader />
+          </div>
+          <div className="w-full h-72">
+            <SkeletonLoader />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/pools/_components/index.tsx b/packages/nextjs/app/pools/_components/index.tsx
index bb9c31ed..01f94246 100644
--- a/packages/nextjs/app/pools/_components/index.tsx
+++ b/packages/nextjs/app/pools/_components/index.tsx
@@ -1,7 +1,4 @@
-export * from "./PoolActions";
-export * from "./PoolComposition";
-export * from "./PoolAttributes";
-export * from "./UserLiquidity";
 export * from "./PoolSelector";
-export * from "./PoolConfig";
-export * from "./HooksConfig";
+export * from "./info";
+export * from "./operations";
+export * from "./PoolPageSkeleton";
diff --git a/packages/nextjs/app/pools/_components/HooksConfig.tsx b/packages/nextjs/app/pools/_components/info/HooksConfig.tsx
similarity index 100%
rename from packages/nextjs/app/pools/_components/HooksConfig.tsx
rename to packages/nextjs/app/pools/_components/info/HooksConfig.tsx
diff --git a/packages/nextjs/app/pools/_components/PoolAttributes.tsx b/packages/nextjs/app/pools/_components/info/PoolAttributes.tsx
similarity index 100%
rename from packages/nextjs/app/pools/_components/PoolAttributes.tsx
rename to packages/nextjs/app/pools/_components/info/PoolAttributes.tsx
diff --git a/packages/nextjs/app/pools/_components/PoolComposition.tsx b/packages/nextjs/app/pools/_components/info/PoolComposition.tsx
similarity index 100%
rename from packages/nextjs/app/pools/_components/PoolComposition.tsx
rename to packages/nextjs/app/pools/_components/info/PoolComposition.tsx
diff --git a/packages/nextjs/app/pools/_components/PoolConfig.tsx b/packages/nextjs/app/pools/_components/info/PoolConfig.tsx
similarity index 100%
rename from packages/nextjs/app/pools/_components/PoolConfig.tsx
rename to packages/nextjs/app/pools/_components/info/PoolConfig.tsx
diff --git a/packages/nextjs/app/pools/_components/UserLiquidity.tsx b/packages/nextjs/app/pools/_components/info/UserLiquidity.tsx
similarity index 100%
rename from packages/nextjs/app/pools/_components/UserLiquidity.tsx
rename to packages/nextjs/app/pools/_components/info/UserLiquidity.tsx
diff --git a/packages/nextjs/app/pools/_components/info/index.tsx b/packages/nextjs/app/pools/_components/info/index.tsx
new file mode 100644
index 00000000..251e52bf
--- /dev/null
+++ b/packages/nextjs/app/pools/_components/info/index.tsx
@@ -0,0 +1,5 @@
+export * from "./PoolComposition";
+export * from "./PoolAttributes";
+export * from "./UserLiquidity";
+export * from "./PoolConfig";
+export * from "./HooksConfig";
diff --git a/packages/nextjs/app/pools/_components/actions/AddLiquidityForm.tsx b/packages/nextjs/app/pools/_components/operations/AddLiquidityForm.tsx
similarity index 92%
rename from packages/nextjs/app/pools/_components/actions/AddLiquidityForm.tsx
rename to packages/nextjs/app/pools/_components/operations/AddLiquidityForm.tsx
index 2e67a629..b1be7466 100644
--- a/packages/nextjs/app/pools/_components/actions/AddLiquidityForm.tsx
+++ b/packages/nextjs/app/pools/_components/operations/AddLiquidityForm.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from "react";
-import { PoolActionButton, ResultsDisplay, TokenField } from ".";
+import { ResultsDisplay, TokenField, TransactionButton } from ".";
 import { InputAmount, calculateProportionalAmounts } from "@balancer/sdk";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatUnits, parseUnits } from "viem";
 import { useContractEvent } from "wagmi";
 import { Alert } from "~~/components/common/";
 import abis from "~~/contracts/abis";
-import { useAddLiquidity, useApproveTokens, useQueryAddLiquidity, useReadTokens } from "~~/hooks/balancer/";
+import { useAddLiquidity, useQueryAddLiquidity } from "~~/hooks/balancer/";
 import { PoolActionsProps, PoolOperationReceipt, TokenAmountDetails } from "~~/hooks/balancer/types";
+import { useApproveTokens, useReadTokens } from "~~/hooks/token/";
 
 /**
  * 1. Query adding some amount of liquidity to the pool
@@ -123,16 +124,16 @@ export const AddLiquidityForm: React.FC<PoolActionsProps> = ({
       })}
 
       {!queryResponse || addLiquidityReceipt || isFormEmpty ? (
-        <PoolActionButton
+        <TransactionButton
           label="Query"
           onClick={handleQueryAddLiquidity}
           isDisabled={isQueryFetching}
           isFormEmpty={isFormEmpty}
         />
       ) : !sufficientAllowances ? (
-        <PoolActionButton label="Approve" isDisabled={isApproving} onClick={approveTokens} />
+        <TransactionButton label="Approve" isDisabled={isApproving} onClick={approveTokens} />
       ) : (
-        <PoolActionButton label="Add Liquidity" isDisabled={isAddLiquidityPending} onClick={handleAddLiquidity} />
+        <TransactionButton label="Add Liquidity" isDisabled={isAddLiquidityPending} onClick={handleAddLiquidity} />
       )}
 
       {queryResponse && (
diff --git a/packages/nextjs/app/pools/_components/PoolActions.tsx b/packages/nextjs/app/pools/_components/operations/PoolOperations.tsx
similarity index 58%
rename from packages/nextjs/app/pools/_components/PoolActions.tsx
rename to packages/nextjs/app/pools/_components/operations/PoolOperations.tsx
index 2640f9e0..24dc6f4d 100644
--- a/packages/nextjs/app/pools/_components/PoolActions.tsx
+++ b/packages/nextjs/app/pools/_components/operations/PoolOperations.tsx
@@ -1,21 +1,18 @@
 import { useState } from "react";
-import { AddLiquidityForm, RemoveLiquidityForm, SwapForm } from "./actions";
+import { AddLiquidityForm, RemoveLiquidityForm, SwapForm } from ".";
 import { useAccount } from "wagmi";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import { useReadTokens } from "~~/hooks/balancer";
-import { type Pool, RefetchPool } from "~~/hooks/balancer";
+import { Alert } from "~~/components/common";
+import { Pool, RefetchPool, TokenBalances } from "~~/hooks/balancer";
 import { useAccountBalance, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+import { useReadTokens } from "~~/hooks/token";
 
-type Action = "Swap" | "AddLiquidity" | "RemoveLiquidity";
+type Operation = "Swap" | "AddLiquidity" | "RemoveLiquidity";
 
 /**
  * Allow user to swap, add liquidity, and remove liquidity from a pool
  */
-export const PoolActions: React.FC<{ pool: Pool; refetchPool: RefetchPool }> = ({ pool, refetchPool }) => {
-  const [activeTab, setActiveTab] = useState<Action>("Swap");
-
-  const { address } = useAccount();
-  const { balance } = useAccountBalance(address);
+export const PoolOperations: React.FC<{ pool: Pool; refetchPool: RefetchPool }> = ({ pool, refetchPool }) => {
+  const [activeTab, setActiveTab] = useState<Operation>("Swap");
 
   const tokens = pool.poolTokens.map(token => ({
     address: token.address as `0x${string}`,
@@ -25,8 +22,6 @@ export const PoolActions: React.FC<{ pool: Pool; refetchPool: RefetchPool }> = (
 
   const { tokenBalances, refetchTokenBalances } = useReadTokens(tokens);
 
-  const userHasNoTokens = Object.values(tokenBalances).every(balance => balance === 0n);
-
   const tabs = {
     Swap: (
       <SwapForm
@@ -57,22 +52,22 @@ export const PoolActions: React.FC<{ pool: Pool; refetchPool: RefetchPool }> = (
   return (
     <div>
       <div className="w-full bg-base-200 rounded-xl p-5 shadow-lg min-h-[516px]">
-        <div className="flex mb-3 items-center justify-between gap-5">
-          <h5 className="text-xl font-bold text-nowrap">Pool Actions</h5>
-          {address && !balance ? (
-            <Alert>Click the faucet button in the top right corner!</Alert>
-          ) : balance !== 0 && userHasNoTokens ? (
-            <ZeroTokensAlert refetchTokenBalances={refetchTokenBalances} />
-          ) : pool.poolConfig?.liquidityManagement.disableUnbalancedLiquidity ? (
-            <Alert>This pool only allows proportional liquidity operations</Alert>
-          ) : null}
+        <div className="flex h-[44px] justify-between gap-5 relative">
+          <h5 className="text-xl font-bold text-nowrap">Pool Operations</h5>
+          <div className="absolute -top-2 right-0">
+            <PoolOperationsAlerts
+              tokenBalances={tokenBalances}
+              refetchTokenBalances={refetchTokenBalances}
+              isUnbalancedLiquidityDisabled={pool.poolConfig?.liquidityManagement.disableUnbalancedLiquidity ?? false}
+            />
+          </div>
         </div>
         <div className="bg-neutral rounded-lg">
           <div className="flex">
             {Object.keys(tabs).map(tab => (
               <button
                 key={tab}
-                onClick={() => setActiveTab(tab as Action)}
+                onClick={() => setActiveTab(tab as Operation)}
                 className={`font-bold py-3 flex-1  ${
                   activeTab === tab
                     ? "rounded-tl-lg rounded-tr-lg text-neutral-700 bg-gradient-to-b from-custom-beige-start to-custom-beige-end to-100%"
@@ -90,7 +85,19 @@ export const PoolActions: React.FC<{ pool: Pool; refetchPool: RefetchPool }> = (
   );
 };
 
-const ZeroTokensAlert = ({ refetchTokenBalances }: { refetchTokenBalances: () => void }) => {
+const PoolOperationsAlerts = ({
+  tokenBalances,
+  refetchTokenBalances,
+  isUnbalancedLiquidityDisabled,
+}: {
+  tokenBalances: TokenBalances;
+  refetchTokenBalances: () => void;
+  isUnbalancedLiquidityDisabled: boolean;
+}) => {
+  const { address } = useAccount();
+  const { balance } = useAccountBalance(address);
+  const userHasNoTokens = Object.values(tokenBalances).every(balance => balance === 0n);
+
   const { writeAsync: mintToken1 } = useScaffoldContractWrite({
     contractName: "MockToken1",
     functionName: "mint",
@@ -103,30 +110,30 @@ const ZeroTokensAlert = ({ refetchTokenBalances }: { refetchTokenBalances: () =>
     args: [100000000000000000000n],
   });
 
-  return (
-    <Alert>
-      To mint 100 of each mock token{" "}
-      <span
-        className="link"
-        onClick={async () => {
-          await mintToken1();
-          await mintToken2();
-          refetchTokenBalances();
-        }}
-      >
-        click here
-      </span>
-    </Alert>
-  );
-};
+  const handleMintTokens = async () => {
+    await mintToken1();
+    await mintToken2();
+    refetchTokenBalances();
+  };
 
-const Alert = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div className="text-warning bg-warning-tint border border-warning rounded-lg py-1 px-5 flex gap-2 items-center justify-center">
-      <div>
-        <ExclamationTriangleIcon className="w-5 h-5" />
-      </div>
-      <div className="">{children}</div>
-    </div>
-  );
+  if (address && !balance) {
+    return <Alert type="warning">Click the faucet button in the top right corner!</Alert>;
+  }
+
+  if (balance !== 0 && userHasNoTokens) {
+    return (
+      <Alert type="info">
+        To mint 100 of each mock token:{" "}
+        <span className="link" onClick={handleMintTokens}>
+          click here
+        </span>
+      </Alert>
+    );
+  }
+
+  if (isUnbalancedLiquidityDisabled) {
+    return <Alert type="info">This pool only allows proportional liquidity operations</Alert>;
+  }
+
+  return null;
 };
diff --git a/packages/nextjs/app/pools/_components/actions/RemoveLiquidityForm.tsx b/packages/nextjs/app/pools/_components/operations/RemoveLiquidityForm.tsx
similarity index 89%
rename from packages/nextjs/app/pools/_components/actions/RemoveLiquidityForm.tsx
rename to packages/nextjs/app/pools/_components/operations/RemoveLiquidityForm.tsx
index 077b4fdf..d1d82ef2 100644
--- a/packages/nextjs/app/pools/_components/actions/RemoveLiquidityForm.tsx
+++ b/packages/nextjs/app/pools/_components/operations/RemoveLiquidityForm.tsx
@@ -1,20 +1,13 @@
 import { useState } from "react";
-import { PoolActionButton, ResultsDisplay, TokenField } from ".";
+import { ResultsDisplay, TokenField, TransactionButton } from ".";
 import { BALANCER_ROUTER, VAULT_V3, vaultV3Abi } from "@balancer/sdk";
 import { useQueryClient } from "@tanstack/react-query";
 import { parseUnits } from "viem";
 import { useContractEvent } from "wagmi";
 import { Alert } from "~~/components/common/";
-import {
-  PoolActionsProps,
-  PoolOperationReceipt,
-  TokenAmountDetails,
-  useAllowanceOnToken,
-  useApproveOnToken,
-  useQueryRemoveLiquidity,
-  useRemoveLiquidity,
-  useTargetFork,
-} from "~~/hooks/balancer/";
+import { useQueryRemoveLiquidity, useRemoveLiquidity, useTargetFork } from "~~/hooks/balancer/";
+import { PoolActionsProps, PoolOperationReceipt, TokenAmountDetails } from "~~/hooks/balancer/types";
+import { useAllowanceOnToken, useApproveOnToken } from "~~/hooks/token";
 import { formatToHuman } from "~~/utils/";
 
 /**
@@ -106,9 +99,9 @@ export const RemoveLiquidityForm: React.FC<PoolActionsProps> = ({ pool, refetchP
       />
 
       {!queryResponse || removeLiquidityReceipt || isFormEmpty ? (
-        <PoolActionButton label="Query" onClick={handleQuery} isDisabled={isQueryFetching} isFormEmpty={isFormEmpty} />
+        <TransactionButton label="Query" onClick={handleQuery} isDisabled={isQueryFetching} isFormEmpty={isFormEmpty} />
       ) : (
-        <PoolActionButton
+        <TransactionButton
           label="Remove Liquidity"
           isDisabled={isRemoveLiquidityPending}
           onClick={handleRemoveLiquidity}
diff --git a/packages/nextjs/app/pools/_components/actions/ResultsDisplay.tsx b/packages/nextjs/app/pools/_components/operations/ResultsDisplay.tsx
similarity index 100%
rename from packages/nextjs/app/pools/_components/actions/ResultsDisplay.tsx
rename to packages/nextjs/app/pools/_components/operations/ResultsDisplay.tsx
diff --git a/packages/nextjs/app/pools/_components/actions/SwapForm.tsx b/packages/nextjs/app/pools/_components/operations/SwapForm.tsx
similarity index 93%
rename from packages/nextjs/app/pools/_components/actions/SwapForm.tsx
rename to packages/nextjs/app/pools/_components/operations/SwapForm.tsx
index b3630bb3..34dd13e8 100644
--- a/packages/nextjs/app/pools/_components/actions/SwapForm.tsx
+++ b/packages/nextjs/app/pools/_components/operations/SwapForm.tsx
@@ -1,24 +1,13 @@
 import { useMemo, useState } from "react";
-import { PoolActionButton, ResultsDisplay, TokenField } from ".";
+import { ResultsDisplay, TokenField, TransactionButton } from ".";
 import { PERMIT2, SwapKind, VAULT_V3, vaultV3Abi } from "@balancer/sdk";
 import { useQueryClient } from "@tanstack/react-query";
 import { parseUnits } from "viem";
 import { useContractEvent } from "wagmi";
 import { Alert } from "~~/components/common";
-import {
-  PoolActionsProps,
-  PoolOperationReceipt,
-  SwapConfig,
-  useQuerySwap,
-  useSwap,
-  useTargetFork,
-} from "~~/hooks/balancer/";
-import {
-  useAllowanceOnPermit2,
-  useAllowanceOnToken,
-  useApproveOnPermit2,
-  useApproveOnToken,
-} from "~~/hooks/balancer/token";
+import { useQuerySwap, useSwap, useTargetFork } from "~~/hooks/balancer/";
+import { PoolActionsProps, PoolOperationReceipt, SwapConfig } from "~~/hooks/balancer/types";
+import { useAllowanceOnPermit2, useAllowanceOnToken, useApproveOnPermit2, useApproveOnToken } from "~~/hooks/token";
 
 const initialSwapConfig = {
   tokenIn: {
@@ -193,20 +182,20 @@ export const SwapForm: React.FC<PoolActionsProps> = ({ pool, refetchPool, tokenB
       />
 
       {!queryResponse || isFormEmpty || swapReceipt ? (
-        <PoolActionButton
+        <TransactionButton
           label="Query"
           onClick={handleQuerySwap}
           isDisabled={isQueryFetching}
           isFormEmpty={isFormEmpty}
         />
       ) : !sufficientAllowance ? (
-        <PoolActionButton
+        <TransactionButton
           label="Approve"
           isDisabled={isApprovePermit2Pending || isApproveRouterPending}
           onClick={handleApprove}
         />
       ) : (
-        <PoolActionButton label="Swap" isDisabled={isSwapPending} onClick={handleSwap} />
+        <TransactionButton label="Swap" isDisabled={isSwapPending} onClick={handleSwap} />
       )}
 
       {(error as Error) && <Alert type="error">{(error as Error).message} / </Alert>}
diff --git a/packages/nextjs/app/pools/_components/actions/TokenField.tsx b/packages/nextjs/app/pools/_components/operations/TokenField.tsx
similarity index 100%
rename from packages/nextjs/app/pools/_components/actions/TokenField.tsx
rename to packages/nextjs/app/pools/_components/operations/TokenField.tsx
diff --git a/packages/nextjs/app/pools/_components/actions/PoolActionButton.tsx b/packages/nextjs/app/pools/_components/operations/TransactionButton.tsx
similarity index 89%
rename from packages/nextjs/app/pools/_components/actions/PoolActionButton.tsx
rename to packages/nextjs/app/pools/_components/operations/TransactionButton.tsx
index 10390bbd..9b11a047 100644
--- a/packages/nextjs/app/pools/_components/actions/PoolActionButton.tsx
+++ b/packages/nextjs/app/pools/_components/operations/TransactionButton.tsx
@@ -12,7 +12,7 @@ interface PoolActionButtonProps {
  * Approve button is outlined style
  * Swap, AddLiquidity, and RemoveLiquidity buttons are solid gradient style
  */
-export const PoolActionButton: React.FC<PoolActionButtonProps> = ({ onClick, label, isDisabled, isFormEmpty }) => {
+export const TransactionButton: React.FC<PoolActionButtonProps> = ({ onClick, label, isDisabled, isFormEmpty }) => {
   const outlined = `border border-base-100 hover:bg-base-100`;
   const gradient = `shadow-md bg-gradient-to-r from-violet-400 via-orange-100 to-orange-300 hover:from-violet-300 hover:via-orange-100 hover:to-orange-400 text-neutral-700 `;
 
diff --git a/packages/nextjs/app/pools/_components/actions/index.tsx b/packages/nextjs/app/pools/_components/operations/index.tsx
similarity index 70%
rename from packages/nextjs/app/pools/_components/actions/index.tsx
rename to packages/nextjs/app/pools/_components/operations/index.tsx
index 97fee6e3..c6292140 100644
--- a/packages/nextjs/app/pools/_components/actions/index.tsx
+++ b/packages/nextjs/app/pools/_components/operations/index.tsx
@@ -2,5 +2,6 @@ export * from "./RemoveLiquidityForm";
 export * from "./AddLiquidityForm";
 export * from "./SwapForm";
 export * from "./TokenField";
-export * from "./PoolActionButton";
+export * from "./TransactionButton";
 export * from "./ResultsDisplay";
+export * from "./PoolOperations";
diff --git a/packages/nextjs/app/pools/page.tsx b/packages/nextjs/app/pools/page.tsx
index 21692b91..78b129b9 100644
--- a/packages/nextjs/app/pools/page.tsx
+++ b/packages/nextjs/app/pools/page.tsx
@@ -1,22 +1,13 @@
 "use client";
 
-import { Fragment, Suspense, useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
-import {
-  HooksConfig,
-  PoolActions,
-  PoolAttributes,
-  PoolComposition,
-  PoolConfig,
-  PoolSelector,
-  UserLiquidity,
-} from "./_components/";
+import { PoolOperations, PoolPageSkeleton, PoolSelector } from "./_components/";
+import { HooksConfig, PoolAttributes, PoolComposition, PoolConfig, UserLiquidity } from "./_components/info";
 import { type NextPage } from "next";
 import { type Address } from "viem";
-import { SkeletonLoader } from "~~/components/common";
-import { useReadPool } from "~~/hooks/balancer";
-import { type Pool } from "~~/hooks/balancer/types";
-import { type RefetchPool } from "~~/hooks/balancer/useReadPool";
+import { Alert } from "~~/components/common";
+import { type Pool, type RefetchPool, useReadPool } from "~~/hooks/balancer/";
 
 /**
  * 1. Search by pool address or select from dropdown
@@ -57,25 +48,22 @@ const PoolPageContent = () => {
   }, [poolAddress]);
 
   return (
-    <Fragment>
+    <>
       <PoolSelector selectedPoolAddress={selectedPoolAddress} setSelectedPoolAddress={setSelectedPoolAddress} />
       {isLoading ? (
         <PoolPageSkeleton />
       ) : isError ? (
-        <div className="text-red-500 text-xl text-center">
-          <div className="mb-3">Error fetching pool data. The pool contract address was not valid</div>
-          <div>{selectedPoolAddress}</div>
-        </div>
+        <Alert type="error">Error attempting to fetch pool data for {selectedPoolAddress}</Alert>
       ) : (
         isSuccess && pool && <PoolDashboard pool={pool} refetchPool={refetchPool} />
       )}
-    </Fragment>
+    </>
   );
 };
 
 const PoolDashboard = ({ pool, refetchPool }: { pool: Pool; refetchPool: RefetchPool }) => {
   return (
-    <Fragment>
+    <>
       <h3 className="mb-7 font-semibold text-3xl xl:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-violet-500 via-violet-400 to-orange-500">
         {pool.name}
       </h3>
@@ -90,40 +78,12 @@ const PoolDashboard = ({ pool, refetchPool }: { pool: Pool; refetchPool: Refetch
           </div>
           <div className="flex flex-col gap-7">
             {pool.poolConfig?.isPoolInitialized && (
-              <PoolActions key={pool.address} pool={pool} refetchPool={refetchPool} />
+              <PoolOperations key={pool.address} pool={pool} refetchPool={refetchPool} />
             )}
             <PoolAttributes pool={pool} />
           </div>
         </div>
       </div>
-    </Fragment>
-  );
-};
-
-const PoolPageSkeleton = () => {
-  return (
-    <div className="w-full">
-      <div className="grid grid-cols-1 xl:grid-cols-2 w-full gap-7 mb-5 mt-20">
-        <div className="flex flex-col gap-7">
-          <div className="w-full h-72">
-            <SkeletonLoader />
-          </div>
-          <div className="w-full h-48">
-            <SkeletonLoader />
-          </div>
-          <div className="w-full h-96">
-            <SkeletonLoader />
-          </div>
-        </div>
-        <div className="flex flex-col gap-7">
-          <div className="w-full h-96">
-            <SkeletonLoader />
-          </div>
-          <div className="w-full h-72">
-            <SkeletonLoader />
-          </div>
-        </div>
-      </div>
-    </div>
+    </>
   );
 };
diff --git a/packages/nextjs/components/common/Alert.tsx b/packages/nextjs/components/common/Alert.tsx
index 5ba90236..6bd1bba5 100644
--- a/packages/nextjs/components/common/Alert.tsx
+++ b/packages/nextjs/components/common/Alert.tsx
@@ -21,7 +21,7 @@ const alertTypeMap = {
 export const Alert: React.FC<AlertProps> = ({ children, type, showIcon = true }) => {
   const { styles, icon } = alertTypeMap[type];
   return (
-    <div className={`${styles} border flex items-center gap-2 rounded-lg p-3 overflow-auto w-full`}>
+    <div className={`${styles} border flex items-center gap-2 p-2 rounded-lg overflow-auto`}>
       {showIcon && <div>{icon}</div>}
       <div>{children}</div>
     </div>
diff --git a/packages/nextjs/hooks/balancer/index.ts b/packages/nextjs/hooks/balancer/index.ts
index 97fd83e2..a47625e6 100644
--- a/packages/nextjs/hooks/balancer/index.ts
+++ b/packages/nextjs/hooks/balancer/index.ts
@@ -5,4 +5,3 @@ export * from "./useFactoryHistory";
 export * from "./swap";
 export * from "./addLiquidity";
 export * from "./removeLiquidity";
-export * from "./token";
diff --git a/packages/nextjs/hooks/balancer/token/useTokenBalanceOfUser.ts b/packages/nextjs/hooks/balancer/token/useTokenBalanceOfUser.ts
deleted file mode 100644
index fe0aba72..00000000
--- a/packages/nextjs/hooks/balancer/token/useTokenBalanceOfUser.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { erc20Abi } from "@balancer/sdk";
-import { Address, zeroAddress } from "viem";
-import { useContractRead, useWalletClient } from "wagmi";
-
-/**
- * Custom hook for dealing with a single token
- */
-export const useTokenBalanceOfUser = (token: Address) => {
-  const { data: walletClient } = useWalletClient();
-  const connectedAddress = walletClient?.account.address || zeroAddress;
-
-  // Balance of token for the connected account
-  return useContractRead({
-    address: token,
-    abi: erc20Abi,
-    functionName: "balanceOf",
-    args: [connectedAddress],
-  });
-};
diff --git a/packages/nextjs/hooks/balancer/token/index.ts b/packages/nextjs/hooks/token/index.ts
similarity index 84%
rename from packages/nextjs/hooks/balancer/token/index.ts
rename to packages/nextjs/hooks/token/index.ts
index e8c91fea..03254d4a 100644
--- a/packages/nextjs/hooks/balancer/token/index.ts
+++ b/packages/nextjs/hooks/token/index.ts
@@ -2,6 +2,5 @@ export * from "./useAllowanceOnPermit2";
 export * from "./useAllowanceOnToken";
 export * from "./useApproveOnPermit2";
 export * from "./useApproveOnToken";
-export * from "./useTokenBalanceOfUser";
 export * from "./useApproveTokens";
 export * from "./useReadTokens";
diff --git a/packages/nextjs/hooks/balancer/token/useAllowanceOnPermit2.ts b/packages/nextjs/hooks/token/useAllowanceOnPermit2.ts
similarity index 100%
rename from packages/nextjs/hooks/balancer/token/useAllowanceOnPermit2.ts
rename to packages/nextjs/hooks/token/useAllowanceOnPermit2.ts
diff --git a/packages/nextjs/hooks/balancer/token/useAllowanceOnToken.ts b/packages/nextjs/hooks/token/useAllowanceOnToken.ts
similarity index 100%
rename from packages/nextjs/hooks/balancer/token/useAllowanceOnToken.ts
rename to packages/nextjs/hooks/token/useAllowanceOnToken.ts
diff --git a/packages/nextjs/hooks/balancer/token/useApproveOnPermit2.ts b/packages/nextjs/hooks/token/useApproveOnPermit2.ts
similarity index 100%
rename from packages/nextjs/hooks/balancer/token/useApproveOnPermit2.ts
rename to packages/nextjs/hooks/token/useApproveOnPermit2.ts
diff --git a/packages/nextjs/hooks/balancer/token/useApproveOnToken.ts b/packages/nextjs/hooks/token/useApproveOnToken.ts
similarity index 100%
rename from packages/nextjs/hooks/balancer/token/useApproveOnToken.ts
rename to packages/nextjs/hooks/token/useApproveOnToken.ts
diff --git a/packages/nextjs/hooks/balancer/token/useApproveTokens.ts b/packages/nextjs/hooks/token/useApproveTokens.ts
similarity index 97%
rename from packages/nextjs/hooks/balancer/token/useApproveTokens.ts
rename to packages/nextjs/hooks/token/useApproveTokens.ts
index dc8cb71e..c3eecc0f 100644
--- a/packages/nextjs/hooks/balancer/token/useApproveTokens.ts
+++ b/packages/nextjs/hooks/token/useApproveTokens.ts
@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
+import { useReadTokens } from ".";
 import { BALANCER_ROUTER, InputAmount, PERMIT2, erc20Abi, permit2Abi } from "@balancer/sdk";
 import { usePublicClient, useWalletClient } from "wagmi";
-import { useReadTokens, useTargetFork } from "~~/hooks/balancer";
+import { useTargetFork } from "~~/hooks/balancer";
 import { useTransactor } from "~~/hooks/scaffold-eth";
 import { MaxUint48, MaxUint160, MaxUint256 } from "~~/utils/constants";
 
diff --git a/packages/nextjs/hooks/balancer/token/useReadTokens.ts b/packages/nextjs/hooks/token/useReadTokens.ts
similarity index 100%
rename from packages/nextjs/hooks/balancer/token/useReadTokens.ts
rename to packages/nextjs/hooks/token/useReadTokens.ts
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index b7e792c3..03ab8bd6 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -20,7 +20,7 @@ module.exports = {
           "base-200": "rgb(245, 243, 239)",
           "base-300": "#EBE8E0", // bg color
           "base-content": "rgb(45, 55, 72)",
-          info: "#0e7490",
+          info: "#a78bfa",
           success: "#047857",
           warning: "#b45309",
           error: "#b91c1c",
@@ -52,7 +52,7 @@ module.exports = {
           "base-200": "rgb(63, 70, 80)",
           "base-300": "rgb(56, 62, 71)", // bg color
           "base-content": "rgb(229, 211, 190)",
-          info: "#67e8f9",
+          info: "#a78bfa",
           success: "#34d399",
           warning: "#fcd34d",
           error: "#fca5a5",
@@ -91,7 +91,7 @@ module.exports = {
         "error-tint": "#ef444433",
         "warning-tint": "#f59e0b33",
         "success-tint": "#10b98133",
-        "info-tint": "#06b6d433",
+        "info-tint": "#a78bfa33",
       },
     },
   },