diff --git a/common/ai/ai.ts b/common/ai/ai.ts
new file mode 100644
index 0000000..1eebebd
--- /dev/null
+++ b/common/ai/ai.ts
@@ -0,0 +1,14 @@
+import { fetchAccessToken } from "@humeai/voice";
+
+export const getHumeAccessToken = async () => {
+    const accessToken = await fetchAccessToken({
+    apiKey: String(process.env.HUME_API_KEY),
+    secretKey: String(process.env.HUME_CLIENT_SECRET),
+  });
+
+  if (accessToken === 'undefined') {
+    return null;
+  }
+
+  return accessToken ?? null;
+}
diff --git a/common/ai/cryptoPriceTool.ts b/common/ai/cryptoPriceTool.ts
new file mode 100644
index 0000000..4ea9ff0
--- /dev/null
+++ b/common/ai/cryptoPriceTool.ts
@@ -0,0 +1,59 @@
+import { Hume } from "hume"
+import { ToolErrorMessage, ToolResponseMessage } from "hume/api/resources/empathicVoice";
+
+async function fetchPriceData(currency: string) {
+  const response = await fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${currency}&vs_currencies=usd`);
+  const data = await response.json();
+  
+  return data[currency].usd;
+}
+
+export async function handleToolCallMessage(
+  toolCallMessage: Hume.empathicVoice.ToolCallMessage): Promise<any> {
+  if (toolCallMessage.name === "coingecko") {
+    try{
+      // parse the parameters from the ToolCall message
+      const args = JSON.parse(toolCallMessage.parameters) as {
+        currency: string;
+      };
+
+      // extract the individual arguments
+      const { currency } = args;
+
+      // call weather fetching function with extracted arguments
+      console.log(currency)
+      const price = await fetchPriceData(currency.toLowerCase());
+      console.log(price)
+      // send ToolResponse message to the WebSocket
+      const toolResponseMessage = {
+        type: "tool_response",
+        toolCallId: toolCallMessage.toolCallId,
+        content: price.toString(),
+      };
+
+      // socket?.sendToolResponseMessage(toolResponseMessage);
+      return toolResponseMessage;
+    } catch (error) {
+      // send ToolError message to the WebSocket if there was an error fetching the weather
+      const cryptoPriceToolErrorMessage = {
+        type: "tool_error",
+        toolCallId: toolCallMessage.toolCallId,
+        error: "Crypto Price tool error",
+        content: "There was an error with the crypto price tool",
+      };
+      console.log(cryptoPriceToolErrorMessage);
+      console.log(error)
+      return cryptoPriceToolErrorMessage;
+    }
+  } else {
+    // send ToolError message to the WebSocket if the requested tool was not found
+    const toolNotFoundErrorMessage = {
+      type: "tool_error",
+      toolCallId: toolCallMessage.toolCallId,
+      error: "Tool not found",
+      content: "The tool you requested was not found",
+    };
+
+    return toolNotFoundErrorMessage;
+  }
+}
diff --git a/common/ai/index.ts b/common/ai/index.ts
new file mode 100644
index 0000000..162fc66
--- /dev/null
+++ b/common/ai/index.ts
@@ -0,0 +1 @@
+export { getHumeAccessToken } from './ai'
diff --git a/common/utils/index.ts b/common/utils/index.ts
index 97fd8cc..d566280 100644
--- a/common/utils/index.ts
+++ b/common/utils/index.ts
@@ -25,4 +25,5 @@ export {
   findChainIconByChainId,
   findChainNameByChainId,
   mapIndexed,
+  cn,
 } from './utils'
diff --git a/common/utils/utils.ts b/common/utils/utils.ts
index c4a977d..3263ab9 100644
--- a/common/utils/utils.ts
+++ b/common/utils/utils.ts
@@ -45,6 +45,9 @@ import {
   reject,
   find,
 } from 'ramda'
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
 import { Network } from '../types'
 import { supportedChains } from '../config'
 
@@ -235,3 +238,7 @@ export const findChainNameByChainId = (chainId: number) =>
   pipe(find(propEq('id', chainId)), prop('routePrefix'))(supportedChains)
 
 export const delay = (time: number) => new Promise(resolve => setTimeout(resolve, time))
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/modules/Controls/Controls.tsx b/modules/Controls/Controls.tsx
new file mode 100644
index 0000000..63d9da6
--- /dev/null
+++ b/modules/Controls/Controls.tsx
@@ -0,0 +1,85 @@
+import React, { FC } from 'react'
+import { useVoice } from "@humeai/voice-react";
+import { Mic, MicOff, Phone } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from '../Button';
+import { cn } from '../../common/utils';
+import { MicFFT } from '../MicFFT';
+import { Toggle } from '../MicToggle';
+
+export const Controls:FC = () => {
+  const { disconnect, status, isMuted, unmute, mute, micFft } = useVoice();
+
+  return (
+    <div
+      className={
+        cn(
+          "fixed bottom-0 left-0 w-full p-4 flex items-center justify-center z-50",
+          "bg-gradient-to-t from-card via-card/90 to-card/0",
+        )
+      }
+    >
+      <AnimatePresence>
+        {status.value === "connected" ? (
+          <motion.div
+            initial={{
+              y: "100%",
+              opacity: 0,
+            }}
+            animate={{
+              y: 0,
+              opacity: 1,
+            }}
+            exit={{
+              y: "100%",
+              opacity: 0,
+            }}
+            className={
+              "p-4 border border-border rounded shadow-sm flex items-center gap-4 bg-white"
+            }
+          >
+            <Toggle
+              pressed={!isMuted}
+              onPressedChange={() => {
+                if (isMuted) {
+                  unmute();
+                } else {
+                  mute();
+                }
+              }}
+            >
+              {isMuted ? (
+                <MicOff className={"size-4 border-black stroke-black"} />
+              ) : (
+                <Mic className={"size-4 stroke-black"} />
+              )}
+            </Toggle>
+
+            <div className={"relative grid h-8 w-48 shrink grow-0"}>
+              <MicFFT fft={micFft} className={" fill-current"} />
+            </div>
+
+            <Button
+              className={"flex items-center"}
+              onClick={() => {
+                disconnect();
+              }}
+            >
+              {/* <div className='flex flex-row'>
+                <span className='mr-2'>
+                  <Phone
+                    className={"size-4 opacity-50"}
+                    strokeWidth={2}
+                    stroke={"currentColor"}
+                  />
+                </span>
+                <span>End Call</span>
+              </div> */}
+              End Call
+            </Button>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/modules/Controls/index.ts b/modules/Controls/index.ts
new file mode 100644
index 0000000..5553364
--- /dev/null
+++ b/modules/Controls/index.ts
@@ -0,0 +1 @@
+export { Controls } from './Controls'
diff --git a/modules/MicFFT/MicFFT.tsx b/modules/MicFFT/MicFFT.tsx
new file mode 100644
index 0000000..3f8d734
--- /dev/null
+++ b/modules/MicFFT/MicFFT.tsx
@@ -0,0 +1,43 @@
+import { motion } from "framer-motion";
+import { AutoSizer } from "react-virtualized";
+import { cn } from "../../common/utils";
+
+export default function MicFFT({
+  fft,
+  className,
+}: {
+  fft: number[];
+  className?: string;
+}) {
+  return (
+    <div className={"relative size-full"}>
+      <AutoSizer>
+        {({ width, height }) => (
+          <motion.svg
+            viewBox={`0 0 ${width} ${height}`}
+            width={width}
+            height={height}
+            className={cn("absolute !inset-0 !size-full", className)}
+          >
+            {Array.from({ length: 24 }).map((_, index) => {
+              const value = (fft[index] ?? 0) / 4;
+              const h = Math.min(Math.max(height * value, 2), height);
+              const yOffset = height * 0.5 - h * 0.5;
+
+              return (
+                <motion.rect
+                  key={`mic-fft-${index}`}
+                  height={h}
+                  width={2}
+                  x={2 + (index * width - 4) / 24}
+                  y={yOffset}
+                  rx={4}
+                />
+              );
+            })}
+          </motion.svg>
+        )}
+      </AutoSizer>
+    </div>
+  );
+}
diff --git a/modules/MicFFT/index.ts b/modules/MicFFT/index.ts
new file mode 100644
index 0000000..d843825
--- /dev/null
+++ b/modules/MicFFT/index.ts
@@ -0,0 +1 @@
+export { default as MicFFT } from './MicFFT'
diff --git a/modules/MicToggle/MicToggle.tsx b/modules/MicToggle/MicToggle.tsx
new file mode 100644
index 0000000..1d9676b
--- /dev/null
+++ b/modules/MicToggle/MicToggle.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../common/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/modules/MicToggle/index.ts b/modules/MicToggle/index.ts
new file mode 100644
index 0000000..6bdea2c
--- /dev/null
+++ b/modules/MicToggle/index.ts
@@ -0,0 +1 @@
+export { Toggle } from './MicToggle'
diff --git a/modules/StartCall/StartCall.tsx b/modules/StartCall/StartCall.tsx
new file mode 100644
index 0000000..fdf2f01
--- /dev/null
+++ b/modules/StartCall/StartCall.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from 'react'
+import { useVoice } from "@humeai/voice-react";
+
+import { Button } from '../Button';
+
+export const StartCall:FC = () => {
+  const { status, connect } = useVoice();
+
+  return(
+    <Button
+      className={"z-50 flex items-center gap-1.5"}
+      onClick={() => {
+        connect()
+          .then(() => {})
+          .catch(() => {})
+          .finally(() => {});
+      }}
+    >
+      {/* <span>
+        <Phone
+          className={"size-4 opacity-50"}
+          strokeWidth={2}
+          stroke={"currentColor"}
+        />
+      </span> */}
+      <span>Start Call</span>
+    </Button>
+  )
+}
\ No newline at end of file
diff --git a/modules/StartCall/index.ts b/modules/StartCall/index.ts
new file mode 100644
index 0000000..7380e5a
--- /dev/null
+++ b/modules/StartCall/index.ts
@@ -0,0 +1 @@
+export { StartCall } from './StartCall'
diff --git a/package-lock.json b/package-lock.json
index 8650069..e1306db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,9 @@
       "dependencies": {
         "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.0.12",
+        "@humeai/voice": "^0.1.10",
+        "@humeai/voice-react": "^0.1.15",
+        "@radix-ui/react-toggle": "^1.1.0",
         "@reduxjs/toolkit": "^1.8.2",
         "@reservoir0x/reservoir-kit-client": "^0.2.5",
         "@reservoir0x/reservoir-sdk": "^2.0.11",
@@ -21,12 +24,16 @@
         "airtable": "^0.11.4",
         "axios": "^0.27.2",
         "big-number": "^2.0.0",
+        "class-variance-authority": "^0.7.0",
         "clsx": "^1.2.1",
         "cryptocurrency-icons": "^0.18.1",
         "date-fns": "^2.28.0",
         "ethers": "^5.7.2",
+        "framer-motion": "^11.9.0",
+        "hume": "^0.8.10",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
+        "lucide-react": "^0.446.0",
         "next": "^14.0.4",
         "next-redux-wrapper": "^8.1.0",
         "nextjs": "^0.0.3",
@@ -43,9 +50,11 @@
         "react-redux": "^8.1.3",
         "react-slick": "^0.30.2",
         "react-toastify": "^9.1.1",
+        "react-virtualized": "^9.22.5",
         "redux-persist": "^6.0.0",
         "sharp": "^0.32.6",
         "slick-carousel": "^1.8.1",
+        "tailwind-merge": "^2.5.2",
         "thirdweb": "^5.15.0",
         "ts-pattern": "^4.0.5",
         "usehooks-ts": "^3.1.0",
@@ -3256,6 +3265,60 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "node_modules/@humeai/voice": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@humeai/voice/-/voice-0.1.10.tgz",
+      "integrity": "sha512-21QEM2JKD2EzOVUw/rmT4NlCqhbka0Jy6EZ2JIrZ3FcT8/Y6JR/RgvS19mbAGnvgpjt3+PvQnuIosjd/0uzMhw==",
+      "dependencies": {
+        "reconnecting-websocket": "^4.4.0",
+        "snakecase-keys": "^8.0.0",
+        "ts-pattern": "^5.0.6",
+        "zod": "^3.22.4"
+      }
+    },
+    "node_modules/@humeai/voice-react": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/@humeai/voice-react/-/voice-react-0.1.15.tgz",
+      "integrity": "sha512-+dXc7T4jEhfVGboEhwEpEh9+yfoE/DgPk51w/ar9RTiA9zIjQzoGvyUVd6xyOfJiisa83oIdnLEOkcAYxGIj2g==",
+      "dependencies": {
+        "date-fns": "^3.6.0",
+        "hume": "0.8.10",
+        "meyda": "^5.6.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "type-fest": "^4.26.0",
+        "zod": "^3.22.4"
+      },
+      "peerDependencies": {
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
+      }
+    },
+    "node_modules/@humeai/voice-react/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/@humeai/voice-react/node_modules/type-fest": {
+      "version": "4.26.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
+      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@humeai/voice/node_modules/ts-pattern": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.4.0.tgz",
+      "integrity": "sha512-hgfOMfjlrARCnYtGD/xEAkFHDXuSyuqjzFSltyQCbN689uNvoQL20TVN2XFcLMjfNuwSsQGU+xtH6MrjIwhwUg=="
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4732,6 +4795,59 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -4750,6 +4866,66 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz",
+      "integrity": "sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -7109,6 +7285,50 @@
         "node": ">=10"
       }
     },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
+      "integrity": "sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
+      "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -8206,6 +8426,11 @@
         "flatpickr": "^4.0.6"
       }
     },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
+    },
     "node_modules/@types/retry": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.5.tgz",
@@ -10018,6 +10243,11 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-add-module-exports": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
+      "integrity": "sha512-3AN/9V/rKuv90NG65m4tTHsI04XrCKsWbztIcW7a8H5iIN7WlvWucRtVV0V/rT4QvtA11n5Vmp20fLwfMWqp6g=="
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -10480,6 +10710,25 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "dependencies": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "node_modules/buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
+    "node_modules/buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ=="
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -10900,6 +11149,25 @@
         "consola": "^3.2.3"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -11538,6 +11806,14 @@
       "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==",
       "peer": true
     },
+    "node_modules/dct": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/dct/-/dct-0.1.0.tgz",
+      "integrity": "sha512-/uUtEniuMq1aUxvLAoDtAduyl12oM1zhA/le2f83UFN/9+4KDHXFB6znEfoj5SDDLiTpUTr26NpxC7t8IFOYhQ==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -11822,6 +12098,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -11890,7 +12175,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
       "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dev": true,
       "dependencies": {
         "no-case": "^3.0.4",
         "tslib": "^2.0.3"
@@ -12925,6 +13209,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -13358,6 +13647,14 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fftjs": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/fftjs/-/fftjs-0.0.4.tgz",
+      "integrity": "sha512-nIWxQyth1LVD6NH8a+YZUv+McjzbOY6dMe4wv6Pq5cGfP+c8Rd1T8Dsd50DCWlNgzSqA3y9lOkpD6dZD3qHa1A==",
+      "dependencies": {
+        "babel-plugin-add-module-exports": "^0.2.1"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -13553,6 +13850,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/form-data-encoder": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-4.0.2.tgz",
+      "integrity": "sha512-KQVhvhK8ZkWzxKxOr56CPulAhH3dobtuQ4+hNQ+HekH/Wp5gSOafqRAeTphQUJAIk0GBvHZgJ2ZGRWd5kphMuw==",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/formdata-node": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-6.0.3.tgz",
+      "integrity": "sha512-8e1++BCiTzUno9v5IZ2J6bv4RU+3UKDmqWUQD0MIMVCd9AdhWkO1gw57oo1mNEX1dMq2EGI+FbWz4B92pscSQg==",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -13566,6 +13879,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.9.0.tgz",
+      "integrity": "sha512-nCfGxvsQecVLjjYDu35G2F5ls+ArE3FBfhxV0RSiisMaUKqteq5DMBFNRKwMyVj+VqKTNhawt+BV480YCHKFlQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -14129,6 +14466,72 @@
         "node": ">=16.17.0"
       }
     },
+    "node_modules/hume": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/hume/-/hume-0.8.10.tgz",
+      "integrity": "sha512-jWhaMDlHjEEXKUneW0NAXfc5PYkr6aIsZ5iV1XiyBK21axMtcFwPmDsMXVG7h7qjivCV93VujYbiSjYOOUNqXg==",
+      "dependencies": {
+        "form-data": "^4.0.0",
+        "form-data-encoder": "^4.0.2",
+        "formdata-node": "^6.0.3",
+        "node-fetch": "2.7.0",
+        "qs": "6.11.2",
+        "readable-stream": "^4.5.2",
+        "url-join": "4.0.1",
+        "uuid": "9.0.1",
+        "ws": "^8.14.2",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/hume/node_modules/qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hume/node_modules/readable-stream": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.5.2.tgz",
+      "integrity": "sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/hume/node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/i18next": {
       "version": "23.11.3",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.3.tgz",
@@ -14636,6 +15039,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -16131,7 +16539,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
       "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
       "dependencies": {
         "tslib": "^2.0.3"
       }
@@ -16144,6 +16551,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.446.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.446.0.tgz",
+      "integrity": "sha512-BU7gy8MfBMqvEdDPH79VhOXSEgyG8TSPOKWaExWGCQVqnGH7wGgDngPbofu+KdtVjPQBWbEmnfMTq90CTiiDRg==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -16184,6 +16599,17 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/marky": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.5.tgz",
@@ -16933,6 +17359,24 @@
         "node": ">=12"
       }
     },
+    "node_modules/meyda": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/meyda/-/meyda-5.6.3.tgz",
+      "integrity": "sha512-fAdwfzIi1WDoL0idUQvCD7dZ7EN74FYH83G+jZQO3Nr9yOEBtzFvcMg2KLdLlu6psSP8XFlO0kYynG5o/E681Q==",
+      "workspaces": [
+        "docs"
+      ],
+      "dependencies": {
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "dct": "0.1.0",
+        "fftjs": "0.0.4",
+        "node-getopt": "^0.3.2",
+        "wav": "^1.0.2"
+      },
+      "bin": {
+        "meyda": "bin/cli.js"
+      }
+    },
     "node_modules/micro-ftch": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/micro-ftch/-/micro-ftch-0.3.1.tgz",
@@ -17776,7 +18220,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
       "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-      "dev": true,
       "dependencies": {
         "lower-case": "^2.0.2",
         "tslib": "^2.0.3"
@@ -17868,6 +18311,14 @@
         "node": ">= 6.13.0"
       }
     },
+    "node_modules/node-getopt": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/node-getopt/-/node-getopt-0.3.2.tgz",
+      "integrity": "sha512-yqkmYrMbK1wPrfz7mgeYvA4tBperLg9FQ4S3Sau3nSAkpOA0x0zC8nQ1siBwozy1f4SE8vq2n1WKv99r+PCa1Q==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/node-gyp-build": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.1.tgz",
@@ -19659,6 +20110,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-markdown": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
@@ -20088,6 +20544,23 @@
         "react": ">=16"
       }
     },
+    "node_modules/react-virtualized": {
+      "version": "9.22.5",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
+      "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -20169,6 +20642,11 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/reconnecting-websocket": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz",
+      "integrity": "sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng=="
+    },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -21129,12 +21607,35 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
       "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
-      "dev": true,
       "dependencies": {
         "dot-case": "^3.0.4",
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/snakecase-keys": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/snakecase-keys/-/snakecase-keys-8.0.1.tgz",
+      "integrity": "sha512-Sj51kE1zC7zh6TDlNNz0/Jn1n5HiHdoQErxO8jLtnyrkJW/M5PrI7x05uDgY3BO7OUQYKCvmeMurW6BPUdwEOw==",
+      "dependencies": {
+        "map-obj": "^4.1.0",
+        "snake-case": "^3.0.4",
+        "type-fest": "^4.15.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/snakecase-keys/node_modules/type-fest": {
+      "version": "4.26.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
+      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/socket.io-client": {
       "version": "4.7.5",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
@@ -21376,6 +21877,27 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/stream-parser": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz",
+      "integrity": "sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==",
+      "dependencies": {
+        "debug": "2"
+      }
+    },
+    "node_modules/stream-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/stream-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/stream-shift": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
@@ -21820,6 +22342,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
+      "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
@@ -23845,6 +24376,11 @@
         "qs": "^6.11.2"
       }
     },
+    "node_modules/url-join": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+      "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
@@ -24187,6 +24723,52 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/wav": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wav/-/wav-1.0.2.tgz",
+      "integrity": "sha512-viHtz3cDd/Tcr/HbNqzQCofKdF6kWUymH9LGDdskfWFoIy/HJ+RTihgjEcHfnsy1PO4e9B+y4HwgTwMrByquhg==",
+      "dependencies": {
+        "buffer-alloc": "^1.1.0",
+        "buffer-from": "^1.0.0",
+        "debug": "^2.2.0",
+        "readable-stream": "^1.1.14",
+        "stream-parser": "^0.3.1"
+      }
+    },
+    "node_modules/wav/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/wav/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/wav/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/wav/node_modules/readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/wav/node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 71e4b4b..53a99cf 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.12",
+    "@humeai/voice": "^0.1.10",
+    "@humeai/voice-react": "^0.1.15",
+    "@radix-ui/react-toggle": "^1.1.0",
     "@reduxjs/toolkit": "^1.8.2",
     "@reservoir0x/reservoir-kit-client": "^0.2.5",
     "@reservoir0x/reservoir-sdk": "^2.0.11",
@@ -23,12 +26,16 @@
     "airtable": "^0.11.4",
     "axios": "^0.27.2",
     "big-number": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cryptocurrency-icons": "^0.18.1",
     "date-fns": "^2.28.0",
     "ethers": "^5.7.2",
+    "framer-motion": "^11.9.0",
+    "hume": "^0.8.10",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
+    "lucide-react": "^0.446.0",
     "next": "^14.0.4",
     "next-redux-wrapper": "^8.1.0",
     "nextjs": "^0.0.3",
@@ -45,9 +52,11 @@
     "react-redux": "^8.1.3",
     "react-slick": "^0.30.2",
     "react-toastify": "^9.1.1",
+    "react-virtualized": "^9.22.5",
     "redux-persist": "^6.0.0",
     "sharp": "^0.32.6",
     "slick-carousel": "^1.8.1",
+    "tailwind-merge": "^2.5.2",
     "thirdweb": "^5.15.0",
     "ts-pattern": "^4.0.5",
     "usehooks-ts": "^3.1.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 272e5b3..a0bd0c9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,8 +4,8 @@ import { FC, useEffect } from 'react'
 import { Provider } from 'react-redux'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
-import { QueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/router'
+import { ThirdwebProvider } from 'thirdweb/react'
 
 import '../styles/globals.css'
 import 'slick-carousel/slick/slick.css'
@@ -20,7 +20,6 @@ import { changeRoute, initialPageLoad } from '../common/app'
 import { URLS } from '../common/config'
 import { SlideUp } from '../modules/SlideUp'
 import { SLIDEUPS } from '../common/slideup'
-import { ThirdwebProvider } from 'thirdweb/react'
 
 const LTLMarketplace: FC<AppProps> = ({ Component, pageProps }) => {
   const router = useRouter()
@@ -46,29 +45,27 @@ const LTLMarketplace: FC<AppProps> = ({ Component, pageProps }) => {
   useEffect(() => {
     query && store.dispatch(initialPageLoad(route))
   }, [query, route])
-
-  const queryClient = new QueryClient()
-
+  console.log(pageProps)
   return (
     <Provider store={store}>
-      <ThirdwebProvider>
-        <Component {...pageProps} />
-        <Modal modals={MODALS} />
-        <SlideUp slideUps={SLIDEUPS} />
-        <ToastContainer
-          position="bottom-center"
-          autoClose={3000}
-          hideProgressBar={false}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          theme="light"
-        />
-        <Confetti />
-      </ThirdwebProvider>
+        <ThirdwebProvider>
+          <Component {...pageProps} />
+          <Modal modals={MODALS} />
+          <SlideUp slideUps={SLIDEUPS} />
+          <ToastContainer
+            position="bottom-center"
+            autoClose={3000}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="light"
+          />
+          <Confetti />
+        </ThirdwebProvider>
     </Provider>
   )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 1556f5b..3393f21 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable react/function-component-definition */
 import Head from 'next/head'
 import Image from 'next/image'
-import { FC, use, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
+import { VoiceProvider } from "@humeai/voice-react"
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import { getHumeAccessToken } from '../common/ai'
 // import { FREE_MINT_CONTRACT, MINT_PASSES } from '../common/config'
 
 import { withLayout } from '../common/layouts'
@@ -19,11 +22,16 @@ import { collectionTokenApi, selectTokensByContractNetworkAndTokenId } from '../
 import { FEATURES } from '../common/config'
 import { map } from 'ramda'
 import { findChainNameByChainId } from '../common/utils'
+import { StartCall } from '../modules/StartCall'
+import { Controls } from '../modules/Controls'
+import { handleToolCallMessage } from '../common/ai/cryptoPriceTool'
 // import { selectedNetwork } from '../modules/NetworkSelector'
 // import { useAppSelector } from '../common/redux/store'
 // import { MintPasses } from '../modules/MintPasses'
 
-const Home: FC = () => {
+const Home: FC = ({
+  accessToken,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   const dispatch = useAppDispatch()
   const data = useAppSelector(state => selectTokensByContractNetworkAndTokenId(state, FEATURES))
   const [features, setFeatures] = useState<any[]>([])
@@ -63,6 +71,11 @@ const Home: FC = () => {
   }, [data])
 
   return (
+    <VoiceProvider
+      auth={{ type: "accessToken", value: accessToken }}
+      configId="ccb6fd91-52cd-4f8c-bcc5-763f647407b5"
+      onToolCall={handleToolCallMessage}
+    >
     <div className="flex items-center flex-col">
       <Head>
         <title>{SITE_TITLE}</title>
@@ -99,7 +112,9 @@ const Home: FC = () => {
                 </div>
               </div>
               <div className="mt-4 md:mt-0 md:pl-16 flex justify-center items-center">
-                <Image src="/assets/images/IKIGAI_LABS_logo.svg" width="80" height="80" alt="IKIGAI logo" />
+                {/* <Image src="/assets/images/IKIGAI_LABS_logo.svg" width="80" height="80" alt="IKIGAI logo" /> */}
+                <Controls />
+                <StartCall />
               </div>
             </div>
             {/* <div className="mt-10 text-lg justify-center flex items-center">
@@ -141,7 +156,15 @@ const Home: FC = () => {
       </main>
       <Footer />
     </div>
+    </VoiceProvider>
   )
 }
 
 export default withLayout(Layout.main)(Home)
+
+export const getServerSideProps = (async () => {
+  // Fetch data from external API
+  const accessToken = await getHumeAccessToken()
+  // Pass data to the page via props
+  return { props: { accessToken } }
+}) satisfies GetServerSideProps<{ accessToken: string }>