diff --git a/website/app/demos/[[...slug]]/page.tsx b/website/app/demos/[[...slug]]/page.tsx
index 0461d177..4ebb3480 100644
--- a/website/app/demos/[[...slug]]/page.tsx
+++ b/website/app/demos/[[...slug]]/page.tsx
@@ -49,7 +49,7 @@ export default async function DemoPage({ params }: DemoPageProps) {
   }
 
   return (
-    <DocContainer title={demo.title} section="Demos">
+    <DocContainer title={demo.title} sections={["Demos"]}>
       <Mdx code={demo.body.code} />
     </DocContainer>
   );
diff --git a/website/app/docs/[[...slug]]/page.tsx b/website/app/docs/[[...slug]]/page.tsx
index 6ee3ae0c..000d37e4 100644
--- a/website/app/docs/[[...slug]]/page.tsx
+++ b/website/app/docs/[[...slug]]/page.tsx
@@ -49,7 +49,7 @@ export default async function DocPage({ params }: DocPageProps) {
   }
 
   return (
-    <DocContainer title={doc.title} section="Docs">
+    <DocContainer title={doc.title} sections={["Docs"]}>
       <Mdx code={doc.body.code} />
     </DocContainer>
   );
diff --git a/website/app/hooks/[[...slug]]/page.tsx b/website/app/hooks/[[...slug]]/page.tsx
index bbfdf58b..d5f3685c 100644
--- a/website/app/hooks/[[...slug]]/page.tsx
+++ b/website/app/hooks/[[...slug]]/page.tsx
@@ -19,7 +19,6 @@ async function getDocFromParams({ params }: DocPageProps) {
     const redirectTo = allHooks[0]?.slugAsParams;
     return { doc: null, redirectTo };
   }
-
   const doc = allHooks.find((doc) => doc.slugAsParams === slug);
 
   if (!doc) {
@@ -48,8 +47,10 @@ export default async function DocPage({ params }: DocPageProps) {
     }
   }
 
+  const sections = ['Hooks', ...params.slug.slice(0, -1)];
+
   return (
-    <DocContainer title={doc.title} section="Hooks">
+    <DocContainer title={doc.title} sections={sections}>
       <Mdx code={doc.body.code} />
     </DocContainer>
   );
diff --git a/website/components/container.tsx b/website/components/container.tsx
index 80bfd78b..01840528 100644
--- a/website/components/container.tsx
+++ b/website/components/container.tsx
@@ -4,22 +4,27 @@ import { cn } from "@/lib/utils";
 import { ChevronRightIcon } from "lucide-react";
 
 export function DocContainer({
-  section,
+  sections,
   title,
   children,
 }: {
-  section: string;
+  sections: string[];
   title: string;
   children?: React.ReactNode;
 }) {
   return (
     <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_200px]">
       <div className="mx-auto w-full min-w-0">
-        <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-            {section}
-          </div>
-          <ChevronRightIcon className="h-4 w-4" />
+        <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground w-fit">
+
+          {sections?.map((section, i) =>
+            <div key={i} className="flex flex-row items-center w-fit">
+              <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+                {section}
+              </div>
+              <ChevronRightIcon className="h-4 w-4" />
+            </div>
+          )}
           <div className="font-medium text-foreground">{title}</div>
         </div>
         <div className="space-y-2">
diff --git a/website/components/sidebar.tsx b/website/components/sidebar.tsx
index d9aeedae..3541a772 100644
--- a/website/components/sidebar.tsx
+++ b/website/components/sidebar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -11,6 +11,7 @@ export type NavItem = {
   external?: boolean;
   disabled?: boolean;
   label?: string;
+  items?: NavItemWithChildren[];
 };
 
 export type NavItemWithChildren = NavItem & {
@@ -19,7 +20,8 @@ export type NavItemWithChildren = NavItem & {
 
 export function Sidebar({ items }: { items: NavItemWithChildren[] }) {
   const pathname = usePathname();
-  return items.length ? (
+
+  return (items.length ?
     <div className="w-full">
       {items.map((item, index) => (
         <div key={index} className={cn("pb-4")}>
@@ -31,8 +33,8 @@ export function Sidebar({ items }: { items: NavItemWithChildren[] }) {
           )}
         </div>
       ))}
-    </div>
-  ) : null;
+    </div> : <></>
+  )
 }
 
 interface DocsSidebarNavItemsProps {
@@ -44,7 +46,13 @@ export function DocsSidebarNavItems({
   items,
   pathname,
 }: DocsSidebarNavItemsProps) {
-  return items?.length ? (
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient && items?.length ? (
     <div className="grid grid-flow-row auto-rows-max text-sm">
       {items.map((item, index) =>
         item.href && !item.disabled ? (
@@ -52,28 +60,27 @@ export function DocsSidebarNavItems({
             key={index}
             href={item.href}
             className={cn(
-              "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
-              item.disabled && "cursor-not-allowed opacity-60",
-              pathname === item.href
-                ? "font-medium text-foreground"
-                : "text-muted-foreground",
+              "group flex flex-col items-start w-full rounded-lg border border-transparent px-2 py-1",
+              pathname === item.href ? "text-foreground" : "text-muted-foreground",
             )}
             target={item.external ? "_blank" : ""}
             rel={item.external ? "noreferrer" : ""}
           >
-            {item.title}
+            <span className={cn("hover:underline", pathname === item.href ? "font-medium" : "")} >{item.title}</span>
             {item.label && (
               <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
                 {item.label}
               </span>
             )}
+            {item.items && item.items.length > 0 && (
+              <DocsSidebarNavItems items={item.items} pathname={pathname} />
+            )}
           </Link>
         ) : (
           <span
             key={index}
             className={cn(
-              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
-              item.disabled && "cursor-not-allowed opacity-60",
+              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground opacity-60",
             )}
           >
             {item.title}
@@ -82,9 +89,12 @@ export function DocsSidebarNavItems({
                 {item.label}
               </span>
             )}
+            {item.items && item.items.length > 0 && (
+              <DocsSidebarNavItems items={item.items} pathname={pathname} />
+            )}
           </span>
         ),
       )}
     </div>
-  ) : null;
+  ) : <></>;
 }
diff --git a/website/components/ui/dialog.tsx b/website/components/ui/dialog.tsx
index aca10680..6c33dae6 100644
--- a/website/components/ui/dialog.tsx
+++ b/website/components/ui/dialog.tsx
@@ -13,8 +13,8 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = ({
   className,
   ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
+}: DialogPrimitive.DialogPortalProps & { className?: string }) => (
+  <DialogPrimitive.Portal {...props} />
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
diff --git a/website/content/hooks/account.mdx b/website/content/hooks/account.mdx
new file mode 100644
index 00000000..7cd5a58d
--- /dev/null
+++ b/website/content/hooks/account.mdx
@@ -0,0 +1,7 @@
+---
+title: Account
+priority: 1
+hookType: doc
+---
+
+An Account hook is a function that allows you to set up the connection with wallets. 
diff --git a/website/content/hooks/account/useAccount.mdx b/website/content/hooks/account/useAccount.mdx
new file mode 100644
index 00000000..8fae638d
--- /dev/null
+++ b/website/content/hooks/account/useAccount.mdx
@@ -0,0 +1,51 @@
+---
+title: useAccount
+priority: 42
+hookType: account
+---
+
+Hook for accessing the account and its connection status.
+
+
+## Usage
+
+```ts
+import { useAccount } from "@starknet-react/core";
+
+export default function Component() {
+  const { account, address, status } = useAccount();
+
+  if (status === "disconnected") return <p>Disconnected</p>;
+  return <p>Account: {address}</p>;
+}
+```
+
+## Options
+    * __onConnect?__`: (args: { address?: string; connector?: Connector}) => void`
+        - Function to invoke when connected.
+        - Connector from starknet.js
+
+    * __onDisconnect?__ `: () => void`
+        - Function to invoke when disconnected.
+
+## Returns
+    * __account?__`: AccountInterface`
+        - The connected account object.
+        - AccountInterface from Starknet.js
+    * __address?__`: string`
+        - The address of the connected account.
+    * __connector?__`: Connector`
+        - The connected connector.
+        - Connector from starknet.js
+    * __status__`: AccountStatus`
+        - The connection status.
+        - AccountStatus from starknet.js
+    * __isConnecting?__`: boolean`
+        - True if connecting.
+    * __isReconnecting?__`: boolean`
+        - True if reconnecting.
+    * __isConnected?__`: boolean`
+        - True if connected.
+    * __isDisconnected?__`: boolean`
+        - True if disconnected.
+
diff --git a/website/content/hooks/account/useConnect.mdx b/website/content/hooks/account/useConnect.mdx
new file mode 100644
index 00000000..9b1f2b3d
--- /dev/null
+++ b/website/content/hooks/account/useConnect.mdx
@@ -0,0 +1,46 @@
+---
+title: useConnect
+priority: 41
+hookType: account
+---
+
+Hook to connect the currently connected wallet.
+
+## Usage
+
+```ts
+import { useConnect } from "@starknet-react/core";
+
+export default function Component() {
+  const { connect, connectors } = useConnect();
+  return (
+    <ul>
+      {connectors.map((connector) => (
+        <li key={connector.id}>
+          <button onClick={() => connect({ connector })}>
+            {connector.name}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## Returns
+    * __connect?__`:(variables: void, options?: InvocationDetails | undefined) => void`
+        - Connect wallet.
+    * __connectAsync?__`: (variables: void, options?: InvocationDetails) => Promise<void>`
+        - Connect wallet.
+    * __connector?__`: Connector`
+        - Current connector.
+        - Connector from Starknet.js.
+    * __connectors__`: Connector[]`
+        - Connectors available for the current chain.
+        - Connector from Starknet.js.
+    * __pendingConnector?__`: Connector`
+        - Connector waiting approval for connection.
+        - Connector from Starknet.js.
+    
+
+
diff --git a/website/content/hooks/account/useDisconnect.mdx b/website/content/hooks/account/useDisconnect.mdx
new file mode 100644
index 00000000..9e7b2caa
--- /dev/null
+++ b/website/content/hooks/account/useDisconnect.mdx
@@ -0,0 +1,28 @@
+---
+title: useDisconnect
+priority: 40
+hookType: account
+
+---
+
+Hook to disconnect the currently connected wallet.
+
+## Usage
+
+
+```ts
+import { useDisconnect} from "@starknet-react/core"
+
+export default function Component() {
+    const { disconnect } = useDisconnect();
+
+  return <button onClick={() => disconnect()}>Disconnect</button>
+}
+
+```
+
+## Returns
+    * __disconnect?__`:(variables: void, options?: InvocationDetails | undefined) => void`
+        - Disconnect wallet
+    * __disconnectAsync?__`: (variables: void, options?: InvocationDetails) => Promise<void>`
+        - Disconnect wallet
\ No newline at end of file
diff --git a/website/content/hooks/mutation.mdx b/website/content/hooks/mutation.mdx
new file mode 100644
index 00000000..268fd210
--- /dev/null
+++ b/website/content/hooks/mutation.mdx
@@ -0,0 +1,40 @@
+---
+title: Mutation
+priority: 2
+hookType: doc
+---
+
+A mutation hook is a function that allows you to perform state-changing operations on the Network. 
+
+The mutation hook type provides a set of return values and options that can be used to control and monitor the status of the mutation.
+In addition to common options and returns, each mutation hook introduces its own unique set of options and returns.
+
+## Options
+
+    * __options?__`: InvocationsDetails`
+        - Additional invocation options.
+        - From starknet.js
+
+## Returns
+
+- **error?**`: Error`
+  - The error if the call was not successful.
+- **variables**`: { calls: Call[], abis: Abi[], options: InvocationDetails }`
+  - Variables passed to the function invocation.
+- **reset**`: () => void`
+  - Clean the mutation internal state.
+- **status**`: "idle" | "loading" | "success" |" error"`
+  - idle before sending the transaction.
+  - loading while sending the transaction.
+  - success if the last invocation was successful.
+  - error if there was an error.
+- **isSuccess?**`: boolean`
+  - Derived from status.
+- **isError?**`: boolean`
+  - Derived from status.
+- **isIdle?**`: boolean`
+  - Derived from status.
+- **isLoading?**`: boolean`
+  - Derived from status.
+- **isPaused?**`: boolean`
+  - If true, the invocation has been paused.
diff --git a/website/content/hooks/mutation/useContractWrite.mdx b/website/content/hooks/mutation/useContractWrite.mdx
new file mode 100644
index 00000000..a68ce76a
--- /dev/null
+++ b/website/content/hooks/mutation/useContractWrite.mdx
@@ -0,0 +1,18 @@
+---
+title: useContractWrite
+priority: 41
+hookType: mutation
+
+---
+
+Hook to send one or more transaction to Starknet.
+
+## Usage
+
+```ts
+import { useContractWrite } from "@starknet-react/core";
+
+export function App() {
+  // TODO
+}
+```
\ No newline at end of file
diff --git a/website/content/hooks/mutation/useSignTypedData.mdx b/website/content/hooks/mutation/useSignTypedData.mdx
new file mode 100644
index 00000000..dd87242e
--- /dev/null
+++ b/website/content/hooks/mutation/useSignTypedData.mdx
@@ -0,0 +1,38 @@
+---
+title: useSignTypedData
+priority: 36
+hookType: mutation
+
+---
+
+Hook to disconnect the currently connected wallet.
+
+## Usage
+
+
+```ts
+import { useSignTypedData } from "@starknet-react/core";
+
+export function App() {
+  // TODO
+}
+```
+
+## Options
+    * __domain?__`: StarknetDomain`
+        - .
+        - From starknet.js
+    * __types?__`: Record<string, StarkNetType[]>`
+        - .
+        - From starknet.js
+    * __message?__`: Record<string, unkwown>`
+        - .
+        - From starknet.js
+    * __primaryType__`: string`
+        - .
+
+## Returns
+    * __signTypedData?__`: (args?: Partial<TypedData>) => void`
+        - .
+    * __signTypedDataAsync__`: (args?: Partial<TypedData>) => Promise<Signature>`
+        - .
\ No newline at end of file
diff --git a/website/content/hooks/query.mdx b/website/content/hooks/query.mdx
new file mode 100644
index 00000000..e8d55016
--- /dev/null
+++ b/website/content/hooks/query.mdx
@@ -0,0 +1,42 @@
+---
+title: Query
+priority: 1
+hookType: doc
+
+---
+
+A query hook is a function that allows you to fetch data on the Network.
+
+The query hook type provides a set of return values and options that can be used to control and monitor the status of the data fetching operation.
+In addition to common options and returns, each query hook introduces its own unique set of options and returns.
+
+## Options
+ * __refetchInterval?__`: number | false | ((data: TData | undefined, query: Query) => number | false)`
+    - Frequency at which to refetch data.
+ * __enabled?__`: boolean`
+    - If false, disables the query.
+ * __suspense__`: //TODO ADD SUSPEN TYPE`
+    - If true, enable suspense mode.
+ * __retry?__`: boolean | number | (failureCount: number, error: TError) => boolean`
+    - If false, failed queries will not be retried.
+    - If true, failed queries will always be retried.
+    - If set to a number, failed queries will be retried the specified number of times.
+    - If set to a callback, the callback will control whether the query is retried or not.
+ * __retryDelay__`: number | (retryAttempt: number, error: TError) => number`
+    - Specify the delay to apply before retrying the query.
+
+## Returns
+ * __error?__`: TError`
+    - The error if the query was not successful.
+ * __refetch__`: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>`
+    - Manually refetch data.
+ * __isSuccess?__`: boolean`
+    - If true, the query was successful.
+ * __isError?__`: boolean`
+    - If true, the query was not successful.
+ * __isIdle?__`: boolean`
+    - If true, the query is not fetching.
+ * __isLoading?__`: boolean`
+    - If true, the query is fetching.
+ * __status__`: "idle" | "loading" | "success" |" error"`
+    - Query status.
\ No newline at end of file
diff --git a/website/content/hooks/query/useBalance.mdx b/website/content/hooks/query/useBalance.mdx
new file mode 100644
index 00000000..82e4d813
--- /dev/null
+++ b/website/content/hooks/query/useBalance.mdx
@@ -0,0 +1,45 @@
+---
+title: useBalance
+priority: 200
+hookType: query
+---
+
+Fetch a block.
+
+## Usage
+
+
+```ts
+import { useAccount, useBalance } from "@starknet-react/core";
+
+export default function Component() {
+    const { address } = useAccount();
+    const {isLoading, isError, error, data} = useBalance({
+        address,
+        watch: true
+    })
+
+    if (isLoading) return <div>Loading ...</div>;
+    if (isError || !data) return <div>{error?.message}</div>;
+    return <div>{data.value.toString()}{data.symbol}</div>
+}
+```
+
+## Options
+
+    * __token?__`: string`
+        - The ERC20 contract's address. Defaults to the native token.
+    * __address?__`: string`
+        - The target address.
+        - If the value is undefined, no call is made.
+    * __watch?__`: boolean`
+        - If true, refresh the balance at every block.
+
+## Returns
+
+   * __data?__`: { decimals: number, symbol: string, formatted: string, value: bigint }`
+        - The address's balance.
+        - decimals is the number of ERC20 decimals.
+        - symbol is the ERC20 symbol.
+        - formatted is the formatted balance.
+        - value is the raw balance.
diff --git a/website/content/hooks/query/useBlock.mdx b/website/content/hooks/query/useBlock.mdx
new file mode 100644
index 00000000..0ee5ec2d
--- /dev/null
+++ b/website/content/hooks/query/useBlock.mdx
@@ -0,0 +1,38 @@
+---
+title: useBlock
+priority: 199
+hookType: query
+
+---
+
+Fetch a block.
+
+## Usage
+
+```ts
+import { useBlock } from "@starknet-react/core";
+import { BlockNumber } from "starknet";
+
+function Component() {
+  const { data, isLoading, isError } = useBlock({
+    refetchInterval: false,
+    blockIdentifier: 'latest' as BlockNumber
+  })
+
+  if (isLoading) return <span>Loading...</span>
+  if (isError || !data) return <span>Error...</span>
+  return <span>Hash: {data.block_hash}</span>
+}
+```
+
+## Options
+
+ * __blockIdentifier__`: BlockNumber`
+    - Which block to fetch.
+    - BlockNumber from Starknet.js
+
+## Returns
+
+ * __data?__`: GetBlockResponse`
+    - The block.
+    - GetBlockResponse from Starknet.js.
\ No newline at end of file
diff --git a/website/content/hooks/query/useBlockNumber.mdx b/website/content/hooks/query/useBlockNumber.mdx
new file mode 100644
index 00000000..8a8d74e9
--- /dev/null
+++ b/website/content/hooks/query/useBlockNumber.mdx
@@ -0,0 +1,35 @@
+---
+title: useBlockNumber
+priority: 198
+hookType: query
+
+---
+
+Fetch the latest or pending block number.
+This hook is useful to trigger a refresh on a new block.
+
+## Usage
+
+```ts
+import { useBlock } from "@starknet-react/core";
+import { BlockNumber } from "starknet";
+
+function Component() {
+  const { data, isLoading, isError } = useBlockNumber({
+    blockIdentifier: 'latest' as BlockNumber
+  })
+
+  if (isLoading) return <span>Loading...</span>
+  if (isError || !data) return <span>Error...</span>
+  return <span>Hash: {data.block_hash}</span>
+}
+```
+
+## Options
+ * __blockIdentifier?__`: BlockNumber`
+    - The block number.
+
+## Returns
+ * __data?__`: GetBlockResponse`
+    - The block.
+    - GetBlockResponse from Starknet.js.
\ No newline at end of file
diff --git a/website/content/hooks/query/useContractRead.mdx b/website/content/hooks/query/useContractRead.mdx
new file mode 100644
index 00000000..798f6dc2
--- /dev/null
+++ b/website/content/hooks/query/useContractRead.mdx
@@ -0,0 +1,96 @@
+---
+title: useContractRead
+priority: 197
+hookType: query
+---
+
+Perform a read-only contract call.
+
+## Usage
+
+```ts
+import { useAccount, useContractRead } from "@starknet-react/core";
+
+const testAddress =
+  "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
+const _abi = [
+  {
+    members: [
+      {
+        name: "low",
+        offset: 0,
+        type: "felt",
+      },
+      {
+        name: "high",
+        offset: 1,
+        type: "felt",
+      },
+    ],
+    name: "Uint256",
+    size: 2,
+    type: "struct",
+  },
+  {
+    name: "balanceOf",
+    type: "function",
+    inputs: [
+      {
+        name: "account",
+        type: "felt",
+      },
+    ],
+    outputs: [
+      {
+        name: "balance",
+        type: "Uint256",
+      },
+    ],
+    stateMutability: "view",
+  },
+];
+
+export default function Component() {
+  const { address } = useAccount();
+
+  const { data, isError, isLoading, error } = useContractRead({
+    functionName: "balanceOf",
+    args: [address as string],
+    abi: _abi,
+    address: testAddress,
+    watch: true,
+  });
+
+  if (isLoading) return <div>Loading ...</div>;
+  if (isError || !data) return <div>{error?.message}</div>;
+  //@ts-ignore
+  return <div>{parseFloat(data.balance.low)}n</div>;
+}
+```
+
+## Options
+
+- __functionName__`: string`
+  - The contract's function name.
+- __args__`: string[]`
+  - The contract's arguments array.
+- __blockIdentifier?__`: BlockNumber`
+  - Block identifier used when performing call.
+  - BlockNumber from starknet.js
+- __parseArgs?__`: boolean`
+  - If true, parse arguments before passing to contract.
+- __parseResult?__`: boolean`
+  - If true, parse result after calling contract.
+- __abi__`: Abi`
+  - The target contract's ABI.
+  - Abi from starknet.js
+- __address__`: string`
+  - Which block to fetch.
+- __watch?__`: boolean`
+  - If true, refresh data at every block.
+
+## Returns
+
+- __data?__`: Result`
+  - The contract
+  - Result from starknet.js
diff --git a/website/content/hooks/query/useStarkAddress.mdx b/website/content/hooks/query/useStarkAddress.mdx
new file mode 100644
index 00000000..58e59d94
--- /dev/null
+++ b/website/content/hooks/query/useStarkAddress.mdx
@@ -0,0 +1,34 @@
+---
+title: useStarkAddress
+priority: 196
+hookType: query
+
+---
+
+Get the address associated to a stark name.
+
+## Usage
+
+```tsx
+function Component() {
+  const { data, isLoading, isError } = useAddressFromStarkName({
+    name: "vitalik.stark",
+  });
+
+  if (isLoading) return <span>Loading...</span>;
+  if (isError) return <span>Error fetching address...</span>;
+  return <span>address: {data}</span>;
+}
+```
+
+## Options
+
+- __name?__`: string`
+    - Stark name.
+- __contract?__`: string`
+    - Naming contract to use.
+
+## Returns
+
+- __data?__`: string`
+  - The starknet address.
\ No newline at end of file
diff --git a/website/content/hooks/query/useStarkName.mdx b/website/content/hooks/query/useStarkName.mdx
new file mode 100644
index 00000000..dbc0cd4e
--- /dev/null
+++ b/website/content/hooks/query/useStarkName.mdx
@@ -0,0 +1,33 @@
+---
+title: useStarkName
+priority: 195
+hookType: query
+---
+
+Get the Stark name associated with an address.
+
+## Usage
+
+```tsx
+function Component() {
+  const address =
+    "0x061b6c0a78f9edf13cea17b50719f3344533fadd470b8cb29c2b4318014f52d3";
+  const { data, isLoading, isError } = useStarkName({ address });
+
+  if (isLoading) return <span>Loading...</span>;
+  if (isError) return <span>Error fetching name...</span>;
+  return <span>StarkName: {data}</span>;
+}
+```
+
+## Options
+
+- __address?__`: string`
+  - Account address.
+- __contract?__`: string`
+  - Naming contract to use.
+
+## Returns
+
+- __data?__`: string`
+  - The stark name.
diff --git a/website/content/hooks/query/useWaitForTransaction.mdx b/website/content/hooks/query/useWaitForTransaction.mdx
new file mode 100644
index 00000000..3065c80a
--- /dev/null
+++ b/website/content/hooks/query/useWaitForTransaction.mdx
@@ -0,0 +1,42 @@
+---
+title: useWaitForTransaction
+priority: 195
+hookType: query
+
+---
+
+Fetches a single transaction receipt.
+This hook keeps a cache of receipts by chain and transaction hash
+so that you can use the hook freely in your application without worrying
+about sending duplicate network requests.
+
+If you need to refresh the transaction receipt data, set `watch: true` in
+the props. The hook will periodically refresh the transaction data in the
+background.
+
+## Usage
+
+```tsx
+import { useWaitForTransaction } from "@starknet-react/core";
+
+export default function Component() {
+    const transaction = "0x1059391b8c4fba9743b531ba371908195ccb5dcf2a9532fac247256fb48912f"
+    const {isLoading, isError, error, data} = useWaitForTransaction({hash: transaction, watch: true})
+
+    if (isLoading) return <div>Loading ...</div>;
+    if (isError || !data) return <div>{error?.message}</div>;
+    return <div>{data.status?.length}</div>
+}
+```
+
+## Options
+
+- __hash__`: string`
+    - The transaction hash.
+- __watch?__`: boolean`
+    - If true, refresh data at every block.
+
+## Returns
+
+- __data__`: GetTransactionReceiptResponse`
+    - GetTransactionReceiptResponse from starknet.js
diff --git a/website/content/hooks/useAccount.mdx b/website/content/hooks/useAccount.mdx
deleted file mode 100644
index 6046e960..00000000
--- a/website/content/hooks/useAccount.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: useAccount
----
-
-Hook with information about the currently connected account.
-
-This is the main way you should use to access the currently connected
-`AccountInterface` instance.
-
-## Usage
-
-```tsx
-import { useAccount } from "@starknet-react/core";
-
-export function App() {
-  const { address } = useAccount();
-
-  return <div>{address}</div>
-}
-```
-
-## Options
-
- * `onConnect?: ({ address, connector }) => void`
-   - Callback invoked when the user connects a wallet.
- * `onDisconnect?: () => void`
-   - Callback invoked when the user disconnects their wallet.
-
-## Returns
-
- * `account?: AccountInterface`
-   - The currently connected account.
-   - `AccountInterface` from starknet.js.
- * `address?: string`
-   - The current account's address.
- * `connector?: Connector`
-   - Connected connector.
- * `isConnecting?: boolean`
-   - True if awaiting for the user to accept connecting their wallet.
- * `isReconnecting?: boolean`
-   - True if awaiting to reconnect account.
- * `isConnected?: boolean`
-   - True if the account is connected.
- * `isDisconnected?: boolean`
-   - True if not connected.
- * `status: AccountStatus`
-   - Account connection status.
-   - `AccountStatus = "connected" | "disconnected" | "connecting" | "reconnecting"`
diff --git a/website/content/hooks/useBalance.mdx b/website/content/hooks/useBalance.mdx
deleted file mode 100644
index 29f7c27d..00000000
--- a/website/content/hooks/useBalance.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: useBalance
----
-
-Hook to fetch an account's balance.
-
-By default, the hook fetches the balance for the chain's native token.
-
-## Usage
-
-```tsx
-import { useBalance, useAccount } from "@starknet-react/core";
-
-export function App() {
-  const { address } = useAccount();
-
-  const { data } = useBalance({ address, watch: true });
-
-  return <div>{data.formatted}</div>;
-}
-```
-
-## Options
-
- * `token?: string`
-   - The ERC20 contract's address. Defaults to the native token.
- * `address?: string`
-   - The target address.
-   - If the value is undefined, no call is made.
- * `watch?: boolean`
-   - If true, refresh the balance at every block.
- * `enabled?: boolean`
-   - From TanStack Query.
-   - If false, disables the query.
- * `refetchInterval?: number | false | ((data: TData | undefined, query: Query) => number | false)`
-   - From TanStack Query.
-   - Frequency at which to refetch data.
- * `suspense`
-   - From TanStack Query.
-   - If true, enable suspense mode.
- * `retry?: boolean | number | (failureCount: number, error: TError) => boolean`
-   - From TanStack Query.
-   - If false, failed queries will not be retried.
-   - If true, failed queries will always be retried.
-   - If set to a number, failed queries will be retried the specified number of
-     times.
-   - If set to a callback, the callback will control whether the query is
-     retried or not.
- * `retryDelay: number | (retryAttempt: number, error: TError) => number`
-   - From TanStack Query.
-   - Specify the delay to apply before retrying the query.
-
-## Returns
-
- * `data?: { decimals: number, symbol: string, formatted: string, value: bigint }`
-   - The address' balance.
-   - `decimals` is the number of ERC20 decimals.
-   - `symbol` is the ERC20 symbol.
-   - `formatted` is the formatted balance.
-   - `value` is the raw balance.
- * `error?: TError`
-   - From TanStack Query.
-   - The error if the query was not successful.
- * `refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>`
-   - From TanStack Query.
-   - Manually refetch data.
- * `isSuccess?: boolean`
-   - From TanStack Query.
-   - If true, the query was successful.
- * `isError?: boolean`
-   - From TanStack Query.
-   - If true, the query was **not** successful.
- * `isIdle?: boolean`
-   - If true, the query is not fetching.
- * `isLoading?: boolean`
-   - If true, the query is fetching.
- * `status: "idle" | "loading" | "success" |" error"`
-   - Query status.
diff --git a/website/content/hooks/useBlock.mdx b/website/content/hooks/useBlock.mdx
deleted file mode 100644
index 87d92763..00000000
--- a/website/content/hooks/useBlock.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: useBlock
----
-
-Fetch a block.
-
-## Usage
-
-```ts
-import { useBlock } from "@starknet-react/core";
-
-export function App() {
-  const { data, isLoading, isError } = useBlock({
-    refetchInterval: false,
-    blockIdentifier: 'latest'
-  })
-
-  if (isLoading) return <span>Loading...</span>
-  if (isError) return <span>Error...</span>
-  return <span>Hash: {data.block_hash}</span>
-}
-```
-
-## Options
-
- * `blockIdentifier?: BlockNumber`
-   - Which block to fetch.
-   - `BlockNumber` from starknet.js
- * `enabled?: boolean`
-   - From TanStack Query.
-   - If false, disables the query.
- * `refetchInterval?: number | false | ((data: TData | undefined, query: Query) => number | false)`
-   - From TanStack Query.
-   - Frequency at which to refetch data.
- * `suspense`
-   - From TanStack Query.
-   - If true, enable suspense mode.
- * `retry?: boolean | number | (failureCount: number, error: TError) => boolean`
-   - From TanStack Query.
-   - If false, failed queries will not be retried.
-   - If true, failed queries will always be retried.
-   - If set to a number, failed queries will be retried the specified number of
-     times.
-   - If set to a callback, the callback will control whether the query is
-     retried or not.
- * `retryDelay: number | (retryAttempt: number, error: TError) => number`
-   - From TanStack Query.
-   - Specify the delay to apply before retrying the query.
-
-## Returns
-
- * `data?: GetBlockResponse`
-   - The block.
-   - `GetBlockResponse` from starknet.js.
- * `error?: TError`
-   - From TanStack Query.
-   - The error if the query was not successful.
- * `refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>`
-   - From TanStack Query.
-   - Manually refetch data.
- * `isSuccess?: boolean`
-   - From TanStack Query.
-   - If true, the query was successful.
- * `isError?: boolean`
-   - From TanStack Query.
-   - If true, the query was **not** successful.
- * `isIdle?: boolean`
-   - If true, the query is not fetching.
- * `isLoading?: boolean`
-   - If true, the query is fetching.
- * `status: "idle" | "loading" | "success" |" error"`
-   - Query status.
diff --git a/website/content/hooks/useBlockNumber.mdx b/website/content/hooks/useBlockNumber.mdx
deleted file mode 100644
index 887e6626..00000000
--- a/website/content/hooks/useBlockNumber.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: useBlockNumber
----
-
-Fetch the latest or pending block number.
-
-This hook is useful to trigger a refresh on a new block.
-
-## Usage
-
-```ts
-import { useBlockNumber } from "@starknet-react/core";
-
-export function App() {
-  const { data, isLoading, isError } = useBlockNumber({
-    blockIdentifier: 'latest'
-  })
-
-  if (isLoading) return <span>Loading...</span>
-  if (isError) return <span>Error...</span>
-  return <span>Block number: {data}</span>
-}
-```
-
-## Options
-
- * `blockIdentifier?: BlockNumber`
-   - Which block to fetch.
-   - `BlockNumber` from starknet.js
- * `enabled?: boolean`
-   - From TanStack Query.
-   - If false, disables the query.
- * `refetchInterval?: number | false | ((data: TData | undefined, query: Query) => number | false)`
-   - From TanStack Query.
-   - Frequency at which to refetch data.
- * `suspense`
-   - From TanStack Query.
-   - If true, enable suspense mode.
- * `retry?: boolean | number | (failureCount: number, error: TError) => boolean`
-   - From TanStack Query.
-   - If false, failed queries will not be retried.
-   - If true, failed queries will always be retried.
-   - If set to a number, failed queries will be retried the specified number of
-     times.
-   - If set to a callback, the callback will control whether the query is
-     retried or not.
- * `retryDelay: number | (retryAttempt: number, error: TError) => number`
-   - From TanStack Query.
-   - Specify the delay to apply before retrying the query.
-
-## Returns
-
- * `data?: number`
-   - The block number.
- * `error?: TError`
-   - From TanStack Query.
-   - The error if the query was not successful.
- * `refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>`
-   - From TanStack Query.
-   - Manually refetch data.
- * `isSuccess?: boolean`
-   - From TanStack Query.
-   - If true, the query was successful.
- * `isError?: boolean`
-   - From TanStack Query.
-   - If true, the query was **not** successful.
- * `isIdle?: boolean`
-   - If true, the query is not fetching.
- * `isLoading?: boolean`
-   - If true, the query is fetching.
- * `status: "idle" | "loading" | "success" |" error"`
-   - Query status.
-
diff --git a/website/content/hooks/useConnect.mdx b/website/content/hooks/useConnect.mdx
deleted file mode 100644
index ecfad32f..00000000
--- a/website/content/hooks/useConnect.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: useConnect
----
-
-Hook to prompt the user to connect their wallet to the dapp.
-
-## Usage
-
-```ts
-import { useConnect } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
-TODO
-
-## Returns
-
-TODO
diff --git a/website/content/hooks/useContract.mdx b/website/content/hooks/useContract.mdx
index 2989c78d..d2a68ee5 100644
--- a/website/content/hooks/useContract.mdx
+++ b/website/content/hooks/useContract.mdx
@@ -1,24 +1,72 @@
 ---
 title: useContract
+priority: 99
+hookType: default
 ---
 
-Hook to create a `Contract` instance.
+Get a contract.
 
 ## Usage
 
 ```ts
 import { useContract } from "@starknet-react/core";
+const testAddress = "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
+const _abi = [
+    {
+        members: [
+            {
+                name: "low",
+                offset: 0,
+                type: "felt",
+            },
+            {
+                name: "high",
+                offset: 1,
+                type: "felt",
+            },
+        ],
+        name: "Uint256",
+        size: 2,
+        type: "struct",
+    },
+    {
+        name: "balanceOf",
+        type: "function",
+        inputs: [
+            {
+                name: "account",
+                type: "felt",
+            },
+        ],
+        outputs: [
+            {
+                name: "balance",
+                type: "Uint256",
+            },
+        ],
+        stateMutability: "view",
+    },
+];
+export default function Component() {
+    const { contract } = useContract({ abi: _abi, address: testAddress })
 
-export function App() {
-  // TODO
+    return (
+        <div>{contract?.address}</div>
+    )
 }
 ```
 
 ## Options
 
-TODO
+ * __abi__`: Abi`
+    - The contract abi.
+    - Abi from Starknet.js
 
-## Returns
+ * __address__`: string`
+    - The contract address.
 
-TODO
+## Returns
 
+ * __contract?__`: Contract`
+    - The contract.
+    - Contract from Starknet.js.
diff --git a/website/content/hooks/useContractFactory.mdx b/website/content/hooks/useContractFactory.mdx
index d3a93c0e..aef800f1 100644
--- a/website/content/hooks/useContractFactory.mdx
+++ b/website/content/hooks/useContractFactory.mdx
@@ -1,24 +1,41 @@
 ---
 title: useContractFactory
+priority: 98
+hookType: default
+
 ---
 
-Hook to create a `ContractFactory` instance.
+Hook to create a `ContractFactory`.
 
 ## Usage
 
 ```ts
-import { useContractFactory } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
+ function Component() {
+   const { contractFactory } = useContractFactory({
+     compiledContract: compiledErc20,
+     classHash: erc20ClassHash,
+     abi: compiledErc20.abi,
+   })
+
+   return <p>Nothing to see here...</p>
+ }
 ```
 
 ## Options
 
-TODO
+ * __compiledContract__`: CompiledContract`
+    - The compiled contract.
+    - CompiledContract from Starknet.js
 
-## Returns
+ * __classHash__`: string`
+    - The class hash.
 
-TODO
+ * __abi__`: Abi`
+    - The contract abi.
+    - Abi from Starknet.js
+
+## Returns
 
+ * __contractFactory?__`: ContractFactory`
+    - The contract factory.
+    - ContractFactory from Starknet.js.
diff --git a/website/content/hooks/useContractRead.mdx b/website/content/hooks/useContractRead.mdx
deleted file mode 100644
index c9745694..00000000
--- a/website/content/hooks/useContractRead.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: useContractRead
----
-
-Hook to perform a call to the provided smart contract.
-
-## Usage
-
-```ts
-import { useContractRead } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
-TODO
-
-## Returns
-
-TODO
-
diff --git a/website/content/hooks/useContractWrite.mdx b/website/content/hooks/useContractWrite.mdx
deleted file mode 100644
index b2a760c6..00000000
--- a/website/content/hooks/useContractWrite.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: useContractWrite
----
-
-Hook to send one or more transaction to Starknet.
-
-## Usage
-
-```ts
-import { useContractWrite } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
- * `calls?: Call[]`
-   - The list of calls to make in the transaction.
-   - From starknet.js
-
- * `abis?: Abi[]`
-   - List of contracts abis.
-   - From starknet.js
-
- * `options?: InvocationsDetails`
-   - Additional invocation options.
-   - From starknet.js
-
-## Returns
-
- * `write?: ({ calls: Call[], abis: Abi[], options: InvocationDetails }) => void`
-   - Execute the calls.
-
- * `writeAsync?: ({ calls: Call[], abis: Abi[], options: InvocationDetails }) => Promise<InvokeFunctionResponse>`
-   - Execute the calls.
-   - Returns the RPC response.
-   - From starknet.js
-
- * `data?: InvokeFunctionResponse`
-   - The result of sending the transaction to the network.
-   - From starknet.js
-
- * `error?: Error`
-   - From TanStack Query.
-   - The error if the call was not successful.
-
- * `variables?: { calls: Call[], abis: Abi[], options: InvocationDetails }`
-   - From TanStack Query.
-   - Variables passed to the function invocation.
-
- * `reset: () => void`
-   - From TanStack Query.
-   - Clean the mutation internal state.
-
- * `status: "error" | "idle" | "loading" | "success"`
-   - From TanStack Query.
-   - `idle` before sending the transaction.
-   - `loading` while sending the transaction.
-   - `success` if the last invocation was successful.
-   - `error` if there was an error.
-
- * `isSuccess: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isError: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isLoading: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isIdle: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isPaused: boolean`
-   - From TanStack Query.
-   - True if the invocation has been paused.
diff --git a/website/content/hooks/useDeployAccount.mdx b/website/content/hooks/useDeployAccount.mdx
deleted file mode 100644
index 9965e63b..00000000
--- a/website/content/hooks/useDeployAccount.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: useDeployAccount
----
-
-Hook to deploy a Starknet account.
-
-## Usage
-
-```ts
-import { useDeployAccount } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
-TODO
-
-## Returns
-
-TODO
-
diff --git a/website/content/hooks/useDisconnect.mdx b/website/content/hooks/useDisconnect.mdx
deleted file mode 100644
index 64c39c71..00000000
--- a/website/content/hooks/useDisconnect.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: useDisconnect
----
-
-Hook to disconnect the currently connected wallet.
-
-## Usage
-
-```ts
-import { useDisconnect } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
-TODO
-
-## Returns
-
-TODO
-
-
diff --git a/website/content/hooks/useInjectedConnectors.mdx b/website/content/hooks/useInjectedConnectors.mdx
index fc3041d6..70632c55 100644
--- a/website/content/hooks/useInjectedConnectors.mdx
+++ b/website/content/hooks/useInjectedConnectors.mdx
@@ -1,5 +1,8 @@
 ---
 title: useInjectedConnectors
+priority: 97
+hookType: default
+
 ---
 
 Hook for discovering injected connectors.
@@ -44,21 +47,21 @@ export default function App({ children }) {
 
 ## Options
 
- * `recommended?: Connector[]`
+ * __recommended?__`: Connector[]`
    - List of recommended connectors.
 
- * `includeRecommended?: "always" | "onlyIfNoConnectors"`
+ * __includeRecommended?__`: "always" | "onlyIfNoConnectors"`
    - If `"always"`, the hook always returns the recommended connectors.
    - If `"onlyIfNoConnectors"`, the recommended connectors are included only if
      no other connector is installed.
 
- * `order?: "random" | "alphabetical"`
+ * __order?__`: "random" | "alphabetical"`
    - Control the order in which connectors are returned.
    - If `"random"`, connectors are shuffled.
    - If `"alphabetical"`, connectors are alphabetically sorted by their id.
 
 ## Returns
 
- * `connectors: Connector[]`
+ * __connectors__`: Connector[]`
    - Contains the list of injected connectors installed by the user.
    - All connectors are unique and sorted.
diff --git a/website/content/hooks/useNetwork.mdx b/website/content/hooks/useNetwork.mdx
index 41270c03..d2e3e3c8 100644
--- a/website/content/hooks/useNetwork.mdx
+++ b/website/content/hooks/useNetwork.mdx
@@ -1,26 +1,29 @@
 ---
 title: useNetwork
+priority: 97
+hookType: default
+
 ---
 
-Return information about the current network.
+Access the current connected chain or the supported chains.
 
 ## Usage
 
 ```ts
-import { useNetwork } from "@starknet-react/core";
+import { useNetwork } from "@starknet-react/core"
 
-export function App() {
-  // TODO
+function Component() {
+  const { chain } = useNetwork()
+  return <span>{chain.name}</span>
 }
 ```
 
-## Options
-
-TODO
-
 ## Returns
 
-TODO
-
-
+ * __chain__`: Chain`
+    - The current chain.
+    - Chain from Starknet.js.
 
+ * __chains__`: Chain[]`
+    - List of supported chains.
+    - Chain from Starknet.js.
diff --git a/website/content/hooks/useProvider.mdx b/website/content/hooks/useProvider.mdx
index 840d5c06..3dc61a6e 100644
--- a/website/content/hooks/useProvider.mdx
+++ b/website/content/hooks/useProvider.mdx
@@ -1,24 +1,24 @@
 ---
 title: useProvider
+priority: 95
+hookType: default
+
 ---
 
-Returns the current Starknet provider.
+Access the current provider, should be inside a StarknetConfig.
 
 ## Usage
 
 ```ts
-import { useProvider } from "@starknet-react/core";
+import { useProvider } from "@starknet-react/core"
 
-export function App() {
-  // TODO
+function Component() {
+    const { provider } = useProvider()
 }
 ```
 
-## Options
-
-TODO
-
 ## Returns
 
-TODO
-
+ * __provider__`: ProviderInterface`
+    - The current provider.
+    - ProviderInterface from Starknet.js.
diff --git a/website/content/hooks/useSignTypedData.mdx b/website/content/hooks/useSignTypedData.mdx
deleted file mode 100644
index 991841a6..00000000
--- a/website/content/hooks/useSignTypedData.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: useSignTypedData
----
-
-Hook to prompt the user to sign data.
-
-## Usage
-
-```ts
-import { useSignTypedData } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
- * `domain: StarkNetDomain`
-   - TypeData's domain.
-
- * `types: Record<string, StarkNetType[]>`
-   - TypeData's types.
-
- * `message: Record<string, unkonwn>`
-   - TypeData's message.
-
- * `primaryType: string`
-   - TypeData's primary type.
-
-## Returns
-
- * `signTypedData?: ({ domain, types, message, primaryType }) => void`
-   - Request user to sign data.
-
- * `writeAsync?: ({ domain, types, message, primaryType }) => Promise<Signature>`
-   - Request user to sign data.
-   - Returns the signature.
-   - From starknet.js
-
- * `data?: Signature`
-   - The signature.
-   - From starknet.js
-
- * `error?: Error`
-   - From TanStack Query.
-   - The error if the call was not successful.
-
- * `variables?: { calls: Call[], abis: Abi[], options: InvocationDetails }`
-   - From TanStack Query.
-   - Variables passed to the function invocation.
-
- * `reset: () => void`
-   - From TanStack Query.
-   - Clean the mutation internal state.
-
- * `status: "error" | "idle" | "loading" | "success"`
-   - From TanStack Query.
-   - `idle` before sending the transaction.
-   - `loading` while sending the transaction.
-   - `success` if the last invocation was successful.
-   - `error` if there was an error.
-
- * `isSuccess: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isError: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isLoading: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isIdle: boolean`
-   - From TanStack Query.
-   - Derived from `status`.
-
- * `isPaused: boolean`
-   - From TanStack Query.
-   - True if the invocation has been paused.
diff --git a/website/content/hooks/useStarkAddress.mdx b/website/content/hooks/useStarkAddress.mdx
deleted file mode 100644
index 7022b618..00000000
--- a/website/content/hooks/useStarkAddress.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: useStarkAddress
----
-
-Hook to fetch the address associated to a stark name.
-
-## Usage
-
-```ts
-import { useStarkAddress } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
-TODO
-
-## Returns
-
-TODO
-
-
-
diff --git a/website/content/hooks/useStarkName.mdx b/website/content/hooks/useStarkName.mdx
deleted file mode 100644
index 0988bb02..00000000
--- a/website/content/hooks/useStarkName.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: useStarkName
----
-
-Hook to fetch the stark name associated with an address.
-
-## Usage
-
-```ts
-import { useStarkName } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
-TODO
-
-## Returns
-
-TODO
-
diff --git a/website/content/hooks/useWaitForTransaction.mdx b/website/content/hooks/useWaitForTransaction.mdx
deleted file mode 100644
index e39e2a27..00000000
--- a/website/content/hooks/useWaitForTransaction.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: useWaitForTransaction
----
-
-Hook to fetch a transaction receipt.
-
-## Usage
-
-```ts
-import { useWaitForTransaction } from "@starknet-react/core";
-
-export function App() {
-  // TODO
-}
-```
-
-## Options
-
-TODO
-
-## Returns
-
-TODO
-
-
diff --git a/website/contentlayer.config.ts b/website/contentlayer.config.ts
index 5feecd77..b95d8310 100644
--- a/website/contentlayer.config.ts
+++ b/website/contentlayer.config.ts
@@ -45,6 +45,14 @@ export const Hook = defineDocumentType(() => ({
       required: true,
       type: "string",
     },
+    priority: {
+      required: true,
+      type: "number",
+    },
+    hookType: {
+      required: true,
+      type: "string" ,
+    },
   },
 }));
 
diff --git a/website/lib/sidebar.ts b/website/lib/sidebar.ts
index e76ed4ce..1f12af3a 100644
--- a/website/lib/sidebar.ts
+++ b/website/lib/sidebar.ts
@@ -3,7 +3,11 @@ import { allDemos, allDocs, allHooks } from "@/.contentlayer/generated";
 import type { NavItemWithChildren } from "@/components/sidebar";
 
 const sortedDemos = allDemos.sort((a, b) => b.priority - a.priority);
-const sortedHooks = allHooks.sort((a, b) => b.title > a.title ? -1 : 1);
+const sortedHooks = allHooks.sort((a, b) => b.priority - a.priority);
+const defaultHooks = sortedHooks.filter((hook) => hook.hookType == "default");
+const queryHooks = sortedHooks.filter((hook) => hook.hookType == "query");
+const mutationHooks = sortedHooks.filter((hook) => hook.hookType == "mutation");
+const accountHooks = sortedHooks.filter((hook) => hook.hookType == "account");
 
 export const demoSidebar: NavItemWithChildren[] = [
   {
@@ -29,12 +33,41 @@ export const docsSidebar: NavItemWithChildren[] = [
   },
   {
     title: "Hooks",
-    items: sortedHooks.map(({ title, slugAsParams }) => ({
-      title,
-      href: `/hooks/${slugAsParams}`,
-      items: [],
-    })),
-  }
+    items: [
+      ...defaultHooks.map(({ title, slugAsParams }) => ({
+        title,
+        href: `/hooks/${slugAsParams}`,
+        items: [],
+      })),
+      {
+        title: "Account",
+        href: "/hooks/account",
+        items: accountHooks.map(({ title, slugAsParams }) => ({
+          title,
+          href: `/hooks/${slugAsParams}`,
+          items: [],
+        })),
+      },
+      {
+        title: "Query",
+        href: "/hooks/query",
+        items: queryHooks.map(({ title, slugAsParams }) => ({
+          title,
+          href: `/hooks/${slugAsParams}`,
+          items: [],
+        })),
+      },
+      {
+        title: "Mutation",
+        href: "/hooks/mutation",
+        items: mutationHooks.map(({ title, slugAsParams }) => ({
+          title,
+          href: `/hooks/${slugAsParams}`,
+          items: [],
+        })),
+      },
+    ],
+  },
 ];
 
 export const mobileSidebar: NavItemWithChildren[] = [