diff --git a/package.json b/package.json
index 741a856..8af17a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-turbo-eth",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Create web3 apps in turbo mode.",
   "author": "Vitor @marthendalnunes",
   "license": "MIT",
diff --git a/src/config/integrations.ts b/src/config/integrations.ts
index ffc21c5..7bfdbab 100644
--- a/src/config/integrations.ts
+++ b/src/config/integrations.ts
@@ -1,6 +1,6 @@
-import type { Integrations } from '../types'
 import path from 'node:path'
 import { z } from 'zod'
+import type { Integrations } from '../types'
 
 const exampleDemosPath = path.join('components', 'shared', 'example-demos.tsx')
 const dataConfigPath = path.join('data', 'turbo-integrations.ts')
@@ -372,4 +372,19 @@ export const integrationOptions: Integrations = {
       },
     ],
   },
+  'defi-llama': {
+    name: 'DefiLlama',
+    pageDependencies: [
+      {
+        dependencyPath: dataConfigPath,
+        type: 'snippet',
+        regexList: [/\n\s*defiLlama: \{\s*name: "DefiLlama",[\s\S]*?imgDark: "\/integrations\/defi-llama\.png",\s*\},/g],
+      },
+      {
+        dependencyPath: exampleDemosPath,
+        type: 'snippet',
+        regexList: [/\n\s*{\s*title: turboIntegrations\.defiLlama\.name,[\s\S]*?\/>\s*<\/div>\s*\),\s*},/g],
+      },
+    ],
+  },
 }
diff --git a/src/types.ts b/src/types.ts
index 78c75e5..3ead4de 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -78,6 +78,7 @@ export type AvailableIntegrations =
   | 'arweave'
   | 'gitcoin-passport'
   | 'lens-protocol'
+  | 'defi-llama'
   | 'starter'
 
 export type Integrations = Record<AvailableIntegrations, Integration>
diff --git a/template/base/app/twitter-image.png b/template/base/app/twitter-image.png
new file mode 100644
index 0000000..62dda55
Binary files /dev/null and b/template/base/app/twitter-image.png differ
diff --git a/template/base/components/shared/example-demos.tsx b/template/base/components/shared/example-demos.tsx
index 2ea6bbf..1ae6b14 100644
--- a/template/base/components/shared/example-demos.tsx
+++ b/template/base/components/shared/example-demos.tsx
@@ -504,6 +504,22 @@ const demos = [
       </div>
     ),
   },
+  {
+    title: turboIntegrations.defiLlama.name,
+    description: turboIntegrations.defiLlama.description,
+    href: turboIntegrations.defiLlama.href,
+    demo: (
+      <div className="flex items-center justify-center space-x-20">
+        <LightDarkImage
+          LightImage={turboIntegrations.defiLlama.imgDark}
+          DarkImage={turboIntegrations.defiLlama.imgLight}
+          alt="Defi Llama logo"
+          height={100}
+          width={100}
+        />
+      </div>
+    ),
+  },
   {
     title: turboIntegrations.starter.name,
     description: turboIntegrations.starter.description,
diff --git a/template/base/data/turbo-integrations.ts b/template/base/data/turbo-integrations.ts
index 3729cfd..2fd3d7c 100644
--- a/template/base/data/turbo-integrations.ts
+++ b/template/base/data/turbo-integrations.ts
@@ -14,7 +14,7 @@ interface TurboIntegration {
   category: (typeof integrationCategories)[number]
 }
 
-export const turboIntegrations: Record<string, TurboIntegration> = {
+export const turboIntegrations = {
   siwe: {
     name: "SIWE",
     href: "/integration/sign-in-with-ethereum",
@@ -199,6 +199,15 @@ export const turboIntegrations: Record<string, TurboIntegration> = {
     imgLight: "/integrations/gitcoin-passport.svg",
     imgDark: "/integrations/gitcoin-passport.svg",
   },
+  defiLlama: {
+    name: "DefiLlama",
+    href: "/integration/defi-llama",
+    url: "https://defillama.com/docs/api",
+    description: "Open and transparent DeFi analytics. ",
+    category: "services",
+    imgLight: "/integrations/defi-llama.png",
+    imgDark: "/integrations/defi-llama.png",
+  },
   starter: {
     name: "Starter Template",
     href: "/integration/starter",
@@ -209,4 +218,4 @@ export const turboIntegrations: Record<string, TurboIntegration> = {
     imgLight: "/logo-gradient.png",
     imgDark: "/logo-gradient.png",
   },
-}
+} as const
diff --git a/template/base/public/integrations/defi-llama.png b/template/base/public/integrations/defi-llama.png
new file mode 100644
index 0000000..8d1852b
Binary files /dev/null and b/template/base/public/integrations/defi-llama.png differ
diff --git a/template/integrations/defi-llama/core/defi-llama/README.md b/template/integrations/defi-llama/core/defi-llama/README.md
new file mode 100644
index 0000000..6eda4b3
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/README.md
@@ -0,0 +1,71 @@
+# DefiLlama TurboETH Integration
+
+This integration allows you to fetch data from [DefiLlama](https://defillama.com/) and convert it to a readable format.
+
+## Features
+
+- Fetch DefiLlama data
+- Convert DefiLlama input/output data to easily readable format
+
+## Components
+
+`FormChart`: Renders a form to input a token info and historical data chart
+
+`FormCurrentPrice`: Renders a form to input a token info and current price
+
+`FormHistoricalPrice`: Renders a form to input a token info and historical price given a timestamp
+
+`FormPercentageChange`: Renders a form to input a token info and percentage change given a timestamp and period of time
+
+`OutputData`: Renders a textArea with the output data
+
+## Hooks
+
+These hooks are react-query wrappers for the [DefiLlama API](https://defillama.com/docs/api).
+
+### Query hooks
+
+`useChart`: Fetches the token prices at regular time intervals.
+
+`useCurrentTokenPrice`: Fetches the current price of a token from DeFi Llama.
+
+`useCurrentNativeTokenPrice`: Wrapper around `useCurrentTokenPrice` that fetches the current price of the native token of the given chain. Defaults to the current chain.
+
+`useCurrentERC20TokenPrice`: Wrapper around `useCurrentTokenPrice` that fetches the current price of an ERC20 token for the given chain. Defaults to the current chain.
+
+`useCurrentTokenPrice`: Fetches the historical price of a token from DeFi Llama given a timestamp.
+
+`useHistoricalNativeTokenPrice`: Wrapper around `useHistoricalTokenPrice` that fetches the historical price of the native token for the given chain. Defaults to the current chain.
+
+`useHistoricalERC20TokenPrice`: Wrapper around `useHistoricalTokenPrice` that fetches the historical price of an ERC20 token for the given chain. Defaults to the current chain.
+
+`useTokenPercentageChange`: Fetches the percentage change in price of a token from DeFi Llama given a timestamp and period of time.
+
+`useNativeTokenPercentageChange`: Wrapper around `useTokenPercentageChange` that fetches the percentage change in price of the native token for the given chain. Defaults to the current chain.
+
+`useERC20TokenPercentageChange`: Wrapper around `useTokenPercentageChange` that fetches the percentage change in price of an ERC20 token for the given chain. Defaults to the current chain.
+
+## File Structure
+
+```
+integrations/defi-llama/
+├─ components/
+│  ├─ form-chart.tsx
+│  ├─ form-current-price.tsx
+│  ├─ form-historical-price.tsx
+│  ├─ form-percentage-change.tsx
+│  ├─ index.ts
+│  ├─ output-data.tsx
+├─ hooks/
+│  ├─ coins/
+│  │  ├─ index.ts
+│  │  ├─ use-chart.ts
+│  │  ├─ use-current-token-price.ts
+│  │  ├─ use-historical-token-price.ts
+│  │  ├─ use-token-percentage-change.ts
+├─ utils/
+│  ├─ index.ts
+│  ├─ types.ts
+├─ index.ts
+├─ README.md
+```
diff --git a/template/integrations/defi-llama/core/defi-llama/components/form-chart.tsx b/template/integrations/defi-llama/core/defi-llama/components/form-chart.tsx
new file mode 100644
index 0000000..1ec70c7
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/components/form-chart.tsx
@@ -0,0 +1,239 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+
+import { useChart } from "../hooks/coins"
+import { calculatePeriod } from "../utils"
+import { OutputData } from "./output-data"
+
+const formSchema = z
+  .object({
+    chain: z.string({
+      required_error: "Please select a chain",
+    }),
+    tokenType: z.union([z.literal("erc20"), z.literal("native")], {
+      required_error: "Please select a token type",
+    }),
+    span: z
+      .string()
+      .refine(
+        (val) => !isNaN(Number(val)) && Number(val) > 1,
+        "Please enter a valid number"
+      ),
+    tokenAddress: z.string().optional(),
+    timeInterval: z.union(
+      [z.literal("1d"), z.literal("5d"), z.literal("30d"), z.literal("365d")],
+      {
+        required_error: "Please select a time interval",
+      }
+    ),
+  })
+  .superRefine((values, ctx) => {
+    if (values.tokenType === "native") return true
+    if (values.tokenAddress && /^0x[a-fA-F0-9]{40}$/.test(values.tokenAddress))
+      return true
+
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please enter a valid address",
+      path: ["tokenAddress"],
+    })
+  })
+
+export function FormChart() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      span: "10",
+    },
+  })
+
+  const { data, isFetching, error, refetch } = useChart({
+    coins: {
+      address: form.watch("tokenAddress"),
+      chainId: Number(form.watch("chain")),
+      type: form.watch("tokenType") as any,
+    },
+    timestamp: {
+      type: "end",
+      value: Math.floor(Date.now() / 1000),
+    },
+    searchWidth: "1h",
+    period: calculatePeriod(
+      form.watch("timeInterval"),
+      Number(form.watch("span"))
+    ),
+    spanDataPoints: isNaN(Number(form.watch("span")))
+      ? 0
+      : Number(form.watch("span")),
+    enabled: false,
+  })
+
+  async function onSubmit() {
+    await refetch?.()
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-4"
+            >
+              <FormField
+                control={form.control}
+                name="chain"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Chain</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a chain" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="1">Ethereum</SelectItem>
+                            <SelectItem value="10">Optimism</SelectItem>
+                            <SelectItem value="137">Polygon</SelectItem>
+                            <SelectItem value="42161">Arbitrum</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="tokenType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Token Type</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a token type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="native">Native</SelectItem>
+                            <SelectItem value="erc20">ERC20</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {form.watch("tokenType") === "erc20" && (
+                <FormField
+                  control={form.control}
+                  name="tokenAddress"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Address</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="0xdF574c24545E5FfEcb9a659c229253D4111d87e1"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              <FormField
+                control={form.control}
+                name="timeInterval"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Time Interval</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a time interval" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="1d">1 Day</SelectItem>
+                            <SelectItem value="5d">5 Days</SelectItem>
+                            <SelectItem value="30d">1 Month</SelectItem>
+                            <SelectItem value="365d">1 year</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="span"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Data points</FormLabel>
+                    <FormControl>
+                      <Input type="number" defaultValue={10} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button disabled={isFetching} type="submit">
+                {isFetching ? "Loading..." : "Submit"}
+              </Button>
+            </form>
+          </Form>
+          <OutputData className="mt-8" data={data} />
+          {error && <span className="text-red-500">{String(error)}</span>}
+        </>
+      </CardContent>
+      <Separator className="my-4" />
+      <CardFooter className="justify-between">
+        <h3 className="text-center">Chart</h3>
+        <p className="text-center text-sm text-muted-foreground">
+          Get token prices at regular time intervals
+        </p>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/components/form-current-price.tsx b/template/integrations/defi-llama/core/defi-llama/components/form-current-price.tsx
new file mode 100644
index 0000000..d81a11e
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/components/form-current-price.tsx
@@ -0,0 +1,171 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+
+import { useCurrentTokenPrice } from "../hooks/coins"
+import { OutputData } from "./output-data"
+
+const formSchema = z
+  .object({
+    chain: z.string({
+      required_error: "Please select a chain",
+    }),
+    tokenType: z.union([z.literal("erc20"), z.literal("native")], {
+      required_error: "Please select a token type",
+    }),
+    tokenAddress: z.string().optional(),
+  })
+  .superRefine((values, ctx) => {
+    if (values.tokenType === "native") return true
+    if (values.tokenAddress && /^0x[a-fA-F0-9]{40}$/.test(values.tokenAddress))
+      return true
+
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please enter a valid address",
+      path: ["tokenAddress"],
+    })
+  })
+
+export function FormCurrentPrice() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+
+  const { data, isFetching, error, refetch } = useCurrentTokenPrice({
+    coins: {
+      address: form.watch("tokenAddress"),
+      chainId: Number(form.watch("chain")),
+      type: form.watch("tokenType") as any,
+    },
+    enabled: false,
+  })
+
+  async function onSubmit() {
+    await refetch?.()
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-4"
+            >
+              <FormField
+                control={form.control}
+                name="chain"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Chain</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a chain" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="1">Ethereum</SelectItem>
+                            <SelectItem value="10">Optimism</SelectItem>
+                            <SelectItem value="137">Polygon</SelectItem>
+                            <SelectItem value="42161">Arbitrum</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="tokenType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Token Type</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a token type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="native">Native</SelectItem>
+                            <SelectItem value="erc20">ERC20</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {form.watch("tokenType") === "erc20" && (
+                <FormField
+                  control={form.control}
+                  name="tokenAddress"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Address</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="0xdF574c24545E5FfEcb9a659c229253D4111d87e1"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <Button disabled={isFetching} type="submit">
+                {isFetching ? "Loading..." : "Submit"}
+              </Button>
+            </form>
+          </Form>
+          <OutputData className="mt-8" data={data} />
+          {error && <span className="text-red-500">{String(error)}</span>}
+        </>
+      </CardContent>
+      <Separator className="my-4" />
+      <CardFooter className="justify-between">
+        <h3 className="text-center">Current Price</h3>
+        <p className="text-center text-sm text-muted-foreground">
+          Get the current price of tokens by contract address.
+        </p>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/components/form-historical-price.tsx b/template/integrations/defi-llama/core/defi-llama/components/form-historical-price.tsx
new file mode 100644
index 0000000..1eec5ba
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/components/form-historical-price.tsx
@@ -0,0 +1,194 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+
+import { useHistoricalTokenPrice } from "../hooks/coins"
+import { OutputData } from "./output-data"
+
+const formSchema = z
+  .object({
+    chain: z.string({
+      required_error: "Please select a chain",
+    }),
+    tokenType: z.union([z.literal("erc20"), z.literal("native")], {
+      required_error: "Please select a token type",
+    }),
+    tokenAddress: z.string().optional(),
+    timestamp: z
+      .string()
+      .refine(
+        (val) => !isNaN(Number(val)) && Number(val) > 0,
+        "Please enter a valid number"
+      ),
+  })
+  .superRefine((values, ctx) => {
+    if (values.tokenType === "native") return true
+    if (values.tokenAddress && /^0x[a-fA-F0-9]{40}$/.test(values.tokenAddress))
+      return true
+
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please enter a valid address",
+      path: ["tokenAddress"],
+    })
+  })
+
+export function FormHistoricalPrice() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+
+  const { data, isFetching, error, refetch } = useHistoricalTokenPrice({
+    coins: {
+      address: form.watch("tokenAddress"),
+      chainId: Number(form.watch("chain")),
+      type: form.watch("tokenType") as any,
+    },
+    timestamp: Number(form.watch("timestamp")),
+    enabled: false,
+  })
+
+  async function onSubmit() {
+    await refetch?.()
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-4"
+            >
+              <FormField
+                control={form.control}
+                name="chain"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Chain</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a chain" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="1">Ethereum</SelectItem>
+                            <SelectItem value="10">Optimism</SelectItem>
+                            <SelectItem value="137">Polygon</SelectItem>
+                            <SelectItem value="42161">Arbitrum</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="tokenType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Token Type</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a token type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="native">Native</SelectItem>
+                            <SelectItem value="erc20">ERC20</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {form.watch("tokenType") === "erc20" && (
+                <FormField
+                  control={form.control}
+                  name="tokenAddress"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Address</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="0xdF574c24545E5FfEcb9a659c229253D4111d87e1"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              <FormField
+                control={form.control}
+                name="timestamp"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Timestamp</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="1630483200"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button disabled={isFetching} type="submit">
+                {isFetching ? "Loading..." : "Submit"}
+              </Button>
+            </form>
+          </Form>
+          <OutputData className="mt-8" data={data} />
+          {error && <span className="text-red-500">{String(error)}</span>}
+        </>
+      </CardContent>
+      <Separator className="my-4" />
+      <CardFooter className="justify-between">
+        <h3 className="text-center">Historical Price</h3>
+        <p className="text-center text-sm text-muted-foreground">
+          Get the historical price of tokens at a timestamp by contract address.
+        </p>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/components/form-percentage-change.tsx b/template/integrations/defi-llama/core/defi-llama/components/form-percentage-change.tsx
new file mode 100644
index 0000000..276a857
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/components/form-percentage-change.tsx
@@ -0,0 +1,231 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter } from "@/components/ui/card"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+
+import { useTokenPercentageChange } from "../hooks/coins"
+import { OutputData } from "./output-data"
+
+const formSchema = z
+  .object({
+    chain: z.string({
+      required_error: "Please select a chain",
+    }),
+    tokenType: z.union([z.literal("erc20"), z.literal("native")], {
+      required_error: "Please select a token type",
+    }),
+    tokenAddress: z.string().optional(),
+    timestamp: z
+      .string()
+      .refine(
+        (val) => !isNaN(Number(val)) && Number(val) > 0,
+        "Please enter a valid number"
+      ),
+    period: z.union(
+      [z.literal("1d"), z.literal("5d"), z.literal("30d"), z.literal("365d")],
+      {
+        required_error: "Please select a time interval",
+      }
+    ),
+  })
+  .superRefine((values, ctx) => {
+    if (values.tokenType === "native") return true
+    if (values.tokenAddress && /^0x[a-fA-F0-9]{40}$/.test(values.tokenAddress))
+      return true
+
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Please enter a valid address",
+      path: ["tokenAddress"],
+    })
+  })
+
+export function FormPercentageChange() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+
+  const { data, isFetching, error, refetch } = useTokenPercentageChange({
+    coins: {
+      address: form.watch("tokenAddress"),
+      chainId: Number(form.watch("chain")),
+      type: form.watch("tokenType") as any,
+    },
+    period: form.watch("period"),
+    timestamp: Number(form.watch("timestamp")),
+    enabled: false,
+  })
+
+  async function onSubmit() {
+    console.log("onSubmit")
+    await refetch?.()
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-4"
+            >
+              <FormField
+                control={form.control}
+                name="chain"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Chain</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a chain" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="1">Ethereum</SelectItem>
+                            <SelectItem value="10">Optimism</SelectItem>
+                            <SelectItem value="137">Polygon</SelectItem>
+                            <SelectItem value="42161">Arbitrum</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="tokenType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Token Type</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a token type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="native">Native</SelectItem>
+                            <SelectItem value="erc20">ERC20</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {form.watch("tokenType") === "erc20" && (
+                <FormField
+                  control={form.control}
+                  name="tokenAddress"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Address</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="0xdF574c24545E5FfEcb9a659c229253D4111d87e1"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              <FormField
+                control={form.control}
+                name="timestamp"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Timestamp</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="1630483200"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="period"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Time Interval</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a time interval" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="1d">1 Day</SelectItem>
+                            <SelectItem value="5d">5 Days</SelectItem>
+                            <SelectItem value="30d">1 Month</SelectItem>
+                            <SelectItem value="365d">1 year</SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button disabled={isFetching} type="submit">
+                {isFetching ? "Loading..." : "Submit"}
+              </Button>
+            </form>
+          </Form>
+          <OutputData className="mt-8" data={data} />
+          {error && <span className="text-red-500">{String(error)}</span>}
+        </>
+      </CardContent>
+      <Separator className="my-4" />
+      <CardFooter className="justify-between">
+        <h3 className="text-center">Percentage Change</h3>
+        <p className="text-center text-sm text-muted-foreground">
+          Get the percentage change in price of tokens at a timestamp by
+          contract address.
+        </p>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/components/index.ts b/template/integrations/defi-llama/core/defi-llama/components/index.ts
new file mode 100644
index 0000000..5a2b21e
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./form-chart"
+export * from "./form-current-price"
+export * from "./form-historical-price"
+export * from "./form-percentage-change"
diff --git a/template/integrations/defi-llama/core/defi-llama/components/output-data.tsx b/template/integrations/defi-llama/core/defi-llama/components/output-data.tsx
new file mode 100644
index 0000000..0a6e054
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/components/output-data.tsx
@@ -0,0 +1,47 @@
+import { HTMLAttributes } from "react"
+import CopyToClipboard from "react-copy-to-clipboard"
+import { FaCopy } from "react-icons/fa"
+
+import { useToast } from "@/lib/hooks/use-toast"
+import { Textarea } from "@/components/ui/textarea"
+
+interface OutputDataProps extends HTMLAttributes<HTMLDivElement> {
+  data?: any
+}
+
+export function OutputData({ data, ...props }: OutputDataProps) {
+  const { toast, dismiss } = useToast()
+
+  const handleToast = () => {
+    toast({
+      title: "Data Copied",
+      description: "The output has been copied to your clipboard.",
+    })
+
+    setTimeout(() => {
+      dismiss()
+    }, 4200)
+  }
+  if (!data) return null
+
+  return (
+    <div className="mt-4 flex w-full flex-col gap-4" {...props}>
+      <div className="flex items-center justify-between pb-2">
+        <h4 className="mb-2 font-semibold">Output</h4>
+        <CopyToClipboard
+          text={JSON.stringify(data, null, 2)}
+          onCopy={handleToast}
+        >
+          <span className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-neutral-100 p-2 hover:bg-neutral-200 dark:bg-neutral-800 hover:dark:bg-neutral-900">
+            <FaCopy className="text-muted-foreground" />
+          </span>
+        </CopyToClipboard>
+      </div>
+      <Textarea
+        readOnly
+        className="h-80"
+        value={JSON.stringify(data, null, 2)}
+      />
+    </div>
+  )
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/hooks/coins/index.ts b/template/integrations/defi-llama/core/defi-llama/hooks/coins/index.ts
new file mode 100644
index 0000000..bf821da
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/hooks/coins/index.ts
@@ -0,0 +1,4 @@
+export * from "./use-chart"
+export * from "./use-current-token-price"
+export * from "./use-historical-token-price"
+export * from "./use-token-percentage-change"
diff --git a/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-chart.ts b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-chart.ts
new file mode 100644
index 0000000..46a7be3
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-chart.ts
@@ -0,0 +1,92 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query"
+
+import {
+  DEFAULT_CACHE_TIME,
+  DEFAULT_SEARCH_WIDTH,
+  DEFI_LLAMA_API_URL,
+} from "../.."
+import { formatCoinsInput } from "../../utils"
+import type { CoinsInput, Period } from "../../utils/types"
+
+type QueryOptions = Omit<
+  UseQueryOptions<
+    unknown,
+    unknown,
+    UseChartResponse,
+    (string | CoinsInput | CoinsInput[])[]
+  >,
+  "initialData" | "queryKey"
+> & { initialData?: (() => undefined) | undefined }
+
+interface UseChartProps extends QueryOptions {
+  coins: CoinsInput[] | CoinsInput
+  searchWidth?: string
+  timestamp?: {
+    type: "start" | "end"
+    value: number
+  }
+  spanDataPoints?: number
+  period?: Period
+}
+
+interface UseChartResponse {
+  coins: {
+    [key: string]: {
+      symbol: string
+      confidence: number
+      decimals?: number
+      prices: {
+        timestamp: number
+        price: number
+      }[]
+    }
+  }
+}
+
+/**
+ * Fetches the token prices at regular time intervals
+ */
+export function useChart({
+  coins,
+  timestamp = {
+    type: "end",
+    value: Math.floor(Date.now() / 1000),
+  },
+  searchWidth = DEFAULT_SEARCH_WIDTH,
+  spanDataPoints,
+  period,
+  cacheTime = DEFAULT_CACHE_TIME,
+  enabled,
+  ...options
+}: UseChartProps) {
+  if (!coins || (Array.isArray(coins) && coins.length === 0)) {
+    throw new Error("Missing required 'coins' parameter")
+  }
+
+  const formattedCoins = formatCoinsInput(
+    Array.isArray(coins) ? coins : [coins]
+  )
+
+  return useQuery(["defi-llama", "chart", coins], {
+    queryFn: async () => {
+      const url = new URL(`${DEFI_LLAMA_API_URL}/chart/${formattedCoins}`)
+      const params = new URLSearchParams()
+
+      if (searchWidth) params.append("searchWidth", searchWidth.toString())
+      if (timestamp.type && timestamp.value)
+        params.append(timestamp.type, timestamp.value.toString())
+      if (spanDataPoints) params.append("span", spanDataPoints.toString())
+      if (period) params.append("period", period.toString())
+
+      url.search = params.toString()
+
+      const response = await fetch(url)
+      if (!response.ok) throw new Error("Failed to fetch chart")
+      const data: UseChartResponse = await response.json()
+
+      return data
+    },
+    enabled: !!coins && enabled,
+    ...options,
+  })
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-current-token-price.ts b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-current-token-price.ts
new file mode 100644
index 0000000..6dc4416
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-current-token-price.ts
@@ -0,0 +1,137 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query"
+import { useChainId } from "wagmi"
+
+import {
+  DEFAULT_CACHE_TIME,
+  DEFAULT_SEARCH_WIDTH,
+  DEFI_LLAMA_API_URL,
+} from "../.."
+import { formatCoinsInput } from "../../utils"
+import type { CoinsInput, PriceResponse } from "../../utils/types"
+
+interface QueryOptions
+  extends Omit<
+    UseQueryOptions<
+      unknown,
+      unknown,
+      CurrentTokenPriceResponse,
+      (string | CoinsInput | CoinsInput[])[]
+    >,
+    "initialData" | "queryKey"
+  > {
+  initialData?: (() => undefined) | undefined
+}
+
+export interface CurrentTokenPriceResponse {
+  coins: {
+    [key: string]: PriceResponse
+  }
+}
+
+interface UseCurrentTokenPriceProps extends QueryOptions {
+  searchWidth?: string
+  coins: CoinsInput[] | CoinsInput
+}
+
+/**
+ * Fetches the current price of a token from DeFi Llama
+ */
+export function useCurrentTokenPrice({
+  coins,
+  searchWidth = DEFAULT_SEARCH_WIDTH,
+  cacheTime = DEFAULT_CACHE_TIME,
+  enabled,
+  ...options
+}: UseCurrentTokenPriceProps) {
+  const formattedCoins = formatCoinsInput(
+    Array.isArray(coins) ? coins : [coins]
+  )
+
+  const fetcher = async () => {
+    if (!coins) return
+    try {
+      const url = new URL(
+        `${DEFI_LLAMA_API_URL}/prices/current/${formattedCoins}`
+      )
+      const params = new URLSearchParams()
+
+      if (searchWidth) {
+        params.append("searchWidth", searchWidth.toString())
+      }
+
+      url.search = params.toString()
+      const response = await fetch(url)
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch current price")
+      }
+      const data: CurrentTokenPriceResponse = await response.json()
+
+      return data
+    } catch (error) {
+      console.error("Error fetching data:", error)
+      throw error
+    }
+  }
+
+  return useQuery(["defi-llama", "current-price", coins, searchWidth], {
+    queryFn: fetcher,
+    enabled: !!coins && enabled,
+    ...options,
+  })
+}
+
+interface UseCurrentNativeTokenPriceProps
+  extends Omit<UseCurrentTokenPriceProps, "coins"> {
+  chainId?: number
+}
+
+/**
+ * Wrapper around `useCurrentTokenPrice` that fetches the current price of the
+ * native token for the given chain. Defaults to the current chain.
+ */
+export function useCurrentNativeTokenPrice(
+  props: UseCurrentNativeTokenPriceProps = {}
+) {
+  const defaultChainId = useChainId()
+  const chainId = props.chainId || defaultChainId
+
+  const coinsInput = { type: "native", chainId } as const
+  const queryResult = useCurrentTokenPrice({
+    coins: coinsInput,
+    ...props,
+  })
+
+  const formattedData =
+    queryResult.data?.coins?.[formatCoinsInput([coinsInput])]
+
+  return { ...queryResult, data: formattedData }
+}
+
+interface UseCurrentERC20TokenPriceProps
+  extends Omit<UseCurrentTokenPriceProps, "coins"> {
+  chainId?: number
+  address: string
+}
+
+/**
+ * Wrapper around `useCurrentTokenPrice` that fetches the current price of an
+ * ERC20 token for the given chain. Defaults to the current chain.
+ */
+export function useCurrentERC20TokenPrice(
+  props: UseCurrentERC20TokenPriceProps
+) {
+  const defaultChainId = useChainId()
+  const chainId = props.chainId || defaultChainId
+
+  const coinsInput = { type: "erc20", chainId, address: props.address } as const
+  const queryResult = useCurrentTokenPrice({
+    coins: coinsInput,
+    ...props,
+  })
+
+  const formattedData =
+    queryResult.data?.coins?.[formatCoinsInput([coinsInput])]
+
+  return { ...queryResult, data: formattedData }
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-historical-token-price.ts b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-historical-token-price.ts
new file mode 100644
index 0000000..a5eb632
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-historical-token-price.ts
@@ -0,0 +1,143 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query"
+import { useChainId } from "wagmi"
+
+import {
+  DEFAULT_CACHE_TIME,
+  DEFAULT_SEARCH_WIDTH,
+  DEFI_LLAMA_API_URL,
+} from "../.."
+import { formatCoinsInput } from "../../utils"
+import type { CoinsInput, PriceResponse } from "../../utils/types"
+
+interface QueryOptions
+  extends Omit<
+    UseQueryOptions<
+      unknown,
+      unknown,
+      HistoricalPriceResponse,
+      (string | number | CoinsInput | CoinsInput[])[]
+    >,
+    "initialData" | "queryKey"
+  > {
+  initialData?: (() => undefined) | undefined
+}
+
+export interface HistoricalPriceResponse {
+  coins: {
+    [key: string]: PriceResponse
+  }
+}
+
+interface UseHistoricalTokenPriceProps extends QueryOptions {
+  searchWidth?: string
+  coins: CoinsInput[] | CoinsInput
+  timestamp: number
+}
+
+/**
+ * Fetches the historical price of a token from DeFi Llama
+ * given a timestamp.
+ */
+export function useHistoricalTokenPrice({
+  coins,
+  searchWidth = DEFAULT_SEARCH_WIDTH,
+  cacheTime = DEFAULT_CACHE_TIME,
+  enabled,
+  timestamp,
+  ...options
+}: UseHistoricalTokenPriceProps) {
+  const formattedCoins = formatCoinsInput(
+    Array.isArray(coins) ? coins : [coins]
+  )
+
+  const fetcher = async () => {
+    if (!coins) return
+    try {
+      const url = new URL(
+        `${DEFI_LLAMA_API_URL}/prices/historical/${timestamp}/${formattedCoins}`
+      )
+      const params = new URLSearchParams()
+
+      if (searchWidth) {
+        params.append("searchWidth", searchWidth.toString())
+      }
+
+      url.search = params.toString()
+      const response = await fetch(url)
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch historical price")
+      }
+      const data: HistoricalPriceResponse = await response.json()
+
+      return data
+    } catch (error) {
+      console.error("Error fetching data:", error)
+      throw error
+    }
+  }
+
+  return useQuery(
+    ["defi-llama", "historical-price", coins, searchWidth, timestamp],
+    {
+      queryFn: fetcher,
+      enabled: !!coins && enabled,
+      ...options,
+    }
+  )
+}
+
+interface UseHistoricalNativeTokenPriceProps
+  extends Omit<UseHistoricalTokenPriceProps, "coins"> {
+  chainId?: number
+}
+
+/**
+ * Wrapper around `useHistoricalTokenPrice` that fetches the historical price of the
+ * native token for the given chain. Defaults to the current chain.
+ */
+export function useHistoricalNativeTokenPrice(
+  props: UseHistoricalNativeTokenPriceProps
+) {
+  const defaultChainId = useChainId()
+  const chainId = props.chainId || defaultChainId
+
+  const coinsInput = { type: "native", chainId } as const
+  const queryResult = useHistoricalTokenPrice({
+    coins: coinsInput,
+    ...props,
+  })
+
+  const formattedData =
+    queryResult.data?.coins?.[formatCoinsInput([coinsInput])]
+
+  return { ...queryResult, data: formattedData }
+}
+
+interface UseHistoricalERC20TokenPriceProps extends QueryOptions {
+  chainId?: number
+  address: string
+  timestamp: number
+}
+
+/**
+ * Wrapper around `useHistoricalTokenPrice` that fetches the historical price of an
+ * ERC20 token for the given chain. Defaults to the current chain.
+ */
+export function useHistoricalERC20TokenPrice(
+  props: UseHistoricalERC20TokenPriceProps
+) {
+  const defaultChainId = useChainId()
+  const chainId = props.chainId || defaultChainId
+
+  const coinsInput = { type: "erc20", chainId, address: props.address } as const
+  const queryResult = useHistoricalTokenPrice({
+    coins: coinsInput,
+    ...props,
+  })
+
+  const formattedData =
+    queryResult.data?.coins?.[formatCoinsInput([coinsInput])]
+
+  return { ...queryResult, data: formattedData }
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-token-percentage-change.ts b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-token-percentage-change.ts
new file mode 100644
index 0000000..5981db3
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/hooks/coins/use-token-percentage-change.ts
@@ -0,0 +1,141 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query"
+import { useChainId } from "wagmi"
+
+import { DEFAULT_CACHE_TIME, DEFI_LLAMA_API_URL } from "../.."
+import { formatCoinsInput } from "../../utils"
+import type { CoinsInput, Period, PriceResponse } from "../../utils/types"
+
+interface QueryOptions
+  extends Omit<
+    UseQueryOptions<
+      unknown,
+      unknown,
+      TokenPercentageChangeResponse,
+      (string | number | Period | boolean | CoinsInput | CoinsInput[])[]
+    >,
+    "initialData" | "queryKey"
+  > {
+  initialData?: (() => undefined) | undefined
+}
+
+export interface TokenPercentageChangeResponse {
+  coins: {
+    [key: string]: number
+  }
+}
+
+interface UseTokenPercentageChangeProps extends QueryOptions {
+  coins: CoinsInput[] | CoinsInput
+  period?: Period
+  lookForward?: boolean
+  timestamp?: number
+}
+
+/**
+ * Fetches the percentage change in price of a token from DeFi Llama
+ * given a timestamp and period of time.
+ */
+export function useTokenPercentageChange({
+  coins,
+  period = "1d",
+  lookForward = false,
+  timestamp = Date.now() / 1000,
+  cacheTime = DEFAULT_CACHE_TIME,
+  enabled,
+  ...options
+}: UseTokenPercentageChangeProps) {
+  const formattedCoins = formatCoinsInput(
+    Array.isArray(coins) ? coins : [coins]
+  )
+
+  const fetcher = async () => {
+    if (!coins) return
+    try {
+      const url = new URL(`${DEFI_LLAMA_API_URL}/percentage/${formattedCoins}`)
+      const params = new URLSearchParams()
+      params.append("period", period.toString())
+      params.append("lookForward", lookForward.toString())
+      params.append("timestamp", timestamp.toString())
+      url.search = params.toString()
+
+      const response = await fetch(url)
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch percentage price change")
+      }
+      const data: TokenPercentageChangeResponse = await response.json()
+
+      return data
+    } catch (error) {
+      console.error("Error fetching data:", error)
+      throw error
+    }
+  }
+
+  return useQuery(
+    [
+      "defi-llama",
+      "percentage-change-price",
+      coins,
+      period,
+      lookForward,
+      timestamp,
+    ],
+    {
+      queryFn: fetcher,
+      enabled: !!coins && enabled,
+      ...options,
+    }
+  )
+}
+
+interface UseNativeTokenPercentageChangeProps
+  extends Omit<UseTokenPercentageChangeProps, "coins"> {
+  chainId?: number
+}
+
+/**
+ * Wrapper around `useTokenPercentageChange` that fetches the percentage change
+ * in price of the native token for the given chain. Defaults to the current
+ * chain.
+ */
+export function useNativeTokenPercentageChange(
+  props: UseNativeTokenPercentageChangeProps = {}
+) {
+  const defaultChainId = useChainId()
+  const chainId = props.chainId || defaultChainId
+
+  const coinsInput = { type: "native", chainId } as const
+  const queryResult = useTokenPercentageChange({ coins: coinsInput, ...props })
+
+  const formattedData =
+    queryResult.data?.coins?.[formatCoinsInput([coinsInput])]
+
+  return { ...queryResult, data: formattedData }
+}
+
+interface UseERC20TokenPercentageChangeProps
+  extends Omit<UseTokenPercentageChangeProps, "coins"> {
+  chainId?: number
+  address: string
+}
+
+/**
+ * Wrapper around `useTokenPercentageChange` that fetches the percentage change
+ * in price of an ERC20 token for the given chain. Defaults to the current
+ * chain.
+ */
+export function useERC20TokenPercentageChange(
+  props: UseERC20TokenPercentageChangeProps
+) {
+  const defaultChainId = useChainId()
+  const chainId = props.chainId || defaultChainId
+
+  const coinsInput = { type: "erc20", chainId, address: props.address } as const
+  const queryResult = useTokenPercentageChange({ coins: coinsInput, ...props })
+
+  const formattedData =
+    queryResult.data?.coins?.[formatCoinsInput([coinsInput])]
+
+  return { ...queryResult, data: formattedData }
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/index.ts b/template/integrations/defi-llama/core/defi-llama/index.ts
new file mode 100644
index 0000000..099ea55
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/index.ts
@@ -0,0 +1,3 @@
+export const DEFI_LLAMA_API_URL = "https://coins.llama.fi"
+export const DEFAULT_CACHE_TIME = 1000 * 60 * 5 // 5 minutes
+export const DEFAULT_SEARCH_WIDTH = "600"
diff --git a/template/integrations/defi-llama/core/defi-llama/utils/index.ts b/template/integrations/defi-llama/core/defi-llama/utils/index.ts
new file mode 100644
index 0000000..eb60c48
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/utils/index.ts
@@ -0,0 +1,62 @@
+import { CoinsInput } from "./types"
+
+export const chainIdToName: Record<number, string> = {
+  1: "ethereum",
+  10: "optimism",
+  137: "matic-network",
+  42161: "arbitrum",
+}
+
+export const nameToChainId: Record<string, number> = {
+  ethereum: 1,
+  optimism: 10,
+  "matic-network": 137,
+  arbitrum: 42161,
+}
+
+export function formatCoinsInput(coinsInputList: CoinsInput[]) {
+  return coinsInputList
+    .map((coinsInput) => {
+      if (coinsInput.type === "native") {
+        return `coingecko:${chainIdToName[coinsInput.chainId]}`
+      }
+      return `${chainIdToName[coinsInput.chainId]}:${coinsInput.address}`
+    })
+    .join(",")
+}
+
+/**
+ * Calculates the period for the chart
+ */
+export const calculatePeriod = (
+  timeInterval:
+    | `${number}m`
+    | `${number}h`
+    | `${number}d`
+    | `${number}y`
+    | undefined,
+  span: number
+) => {
+  if (!timeInterval) {
+    return "0m" as const
+  }
+
+  // span = Number of data points
+  let intervalMinutes: number
+  if (timeInterval.includes("y")) {
+    intervalMinutes = Number(timeInterval?.replace("y", "")) * 365 * 24 * 60
+  } else if (timeInterval.includes("d")) {
+    intervalMinutes = Number(timeInterval?.replace("d", "")) * 24 * 60
+  } else if (timeInterval.includes("h")) {
+    intervalMinutes = Number(timeInterval?.replace("h", "")) * 60
+  } else if (timeInterval.includes("m")) {
+    intervalMinutes = Number(timeInterval?.replace("m", ""))
+  } else {
+    intervalMinutes = Number(timeInterval)
+  }
+
+  // Number of days in the time interval
+  const periodMinutes = Math.floor(intervalMinutes / (span - 1))
+
+  return `${periodMinutes}m` as const
+}
diff --git a/template/integrations/defi-llama/core/defi-llama/utils/types.ts b/template/integrations/defi-llama/core/defi-llama/utils/types.ts
new file mode 100644
index 0000000..d810e43
--- /dev/null
+++ b/template/integrations/defi-llama/core/defi-llama/utils/types.ts
@@ -0,0 +1,28 @@
+/**
+ * Period representation of DefiLlama API
+ * "w" = "week"
+ * "d" = "day"
+ * "h" = "hour"
+ * "m" = "minute"
+ * @example "1w" | "1d" | "1h" | "1m"
+ */
+export type Period = `${number}${"w" | "d" | "h" | "m"}`
+
+export type CoinsInput =
+  | {
+      chainId: number
+      type: "native"
+    }
+  | {
+      chainId: number
+      type: "erc20"
+      address: string
+    }
+
+export type PriceResponse = {
+  price: number
+  symbol: string
+  timestamp: number
+  decimals?: number
+  confidence: number
+}
diff --git a/template/integrations/defi-llama/pages/defi-llama/opengraph-image.tsx b/template/integrations/defi-llama/pages/defi-llama/opengraph-image.tsx
new file mode 100644
index 0000000..7041589
--- /dev/null
+++ b/template/integrations/defi-llama/pages/defi-llama/opengraph-image.tsx
@@ -0,0 +1,9 @@
+import { IntegrationOgImage } from "@/components/ui/social/og-image-integrations"
+
+export const runtime = "edge"
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export default IntegrationOgImage("defiLlama")
diff --git a/template/integrations/defi-llama/pages/defi-llama/page.tsx b/template/integrations/defi-llama/pages/defi-llama/page.tsx
new file mode 100644
index 0000000..480603b
--- /dev/null
+++ b/template/integrations/defi-llama/pages/defi-llama/page.tsx
@@ -0,0 +1,62 @@
+import Link from "next/link"
+import { turboIntegrations } from "@/data/turbo-integrations"
+import { LuBook } from "react-icons/lu"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import {
+  PageHeader,
+  PageHeaderCTA,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/layout/page-header"
+import { PageSection } from "@/components/layout/page-section"
+import { LightDarkImage } from "@/components/shared/light-dark-image"
+import {
+  FormChart,
+  FormCurrentPrice,
+  FormHistoricalPrice,
+  FormPercentageChange,
+} from "@/integrations/defi-llama/components"
+
+const integrationData = turboIntegrations.defiLlama
+
+export default function IntegrationPage() {
+  return (
+    <div className="container relative mt-20">
+      <PageHeader className="pb-8">
+        <LightDarkImage
+          LightImage={integrationData.imgDark}
+          DarkImage={integrationData.imgLight}
+          alt="TurboETH Logo"
+          width={100}
+          height={100}
+          className="h-20 w-20 rounded-2xl"
+        />
+        <PageHeaderHeading>{integrationData.name}</PageHeaderHeading>
+        <PageHeaderDescription>
+          {integrationData.description}
+        </PageHeaderDescription>
+        <PageHeaderCTA>
+          <Link
+            href={integrationData.url}
+            target="_blank"
+            rel="noreferrer noopener"
+            className={cn(buttonVariants({ variant: "outline" }))}
+          >
+            <LuBook className="mr-2 h-4 w-4" />
+            Documentation
+          </Link>
+        </PageHeaderCTA>
+      </PageHeader>
+      <PageSection>
+        <div className="flex w-full max-w-screen-lg flex-col gap-y-10">
+          <FormCurrentPrice />
+          <FormChart />
+          <FormHistoricalPrice />
+          <FormPercentageChange />
+        </div>
+      </PageSection>
+    </div>
+  )
+}
diff --git a/template/integrations/defi-llama/pages/defi-llama/twitter-image.tsx b/template/integrations/defi-llama/pages/defi-llama/twitter-image.tsx
new file mode 100644
index 0000000..215a2a5
--- /dev/null
+++ b/template/integrations/defi-llama/pages/defi-llama/twitter-image.tsx
@@ -0,0 +1,9 @@
+import Image from "./opengraph-image"
+
+export const runtime = "edge"
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export default Image