diff --git a/bun.lockb b/bun.lockb
index 9b9612a..b04ce0f 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components.json b/components.json
index 5fd5e49..dc58f0a 100644
--- a/components.json
+++ b/components.json
@@ -14,4 +14,4 @@
 	},
 	"typescript": true,
 	"registry": "https://next.shadcn-svelte.com/registry"
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 99618ce..a0d7b5a 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.0.0-next.34",
+		"bits-ui": "^1.0.0-next.64",
 		"clsx": "^2.1.1",
 		"formsnap": "^2.0.0-next.1",
 		"lucide-svelte": "^0.454.0",
@@ -36,6 +36,7 @@
 		"zod": "^3.23.8"
 	},
 	"dependencies": {
+		"axios": "^1.7.7",
 		"mode-watcher": "^0.4.1"
 	}
 }
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..1f52856
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..da02664
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..6894149
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..1baa92c
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..f7d59c1
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..3e3a4ed
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..0f9084d
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,22 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..e86a25b
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..b436056
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..9943f83
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..f1ab372
--- /dev/null
+++ b/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+const Root = TabsPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};
diff --git a/src/lib/components/ui/tabs/tabs-content.svelte b/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..f1c0515
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..f03e5fc
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..f1f5825
--- /dev/null
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/routes/(components)/bingx.svelte b/src/routes/(components)/bingx.svelte
new file mode 100644
index 0000000..89cdf4a
--- /dev/null
+++ b/src/routes/(components)/bingx.svelte
@@ -0,0 +1,289 @@
+<script lang="ts">
+	import * as Form from '$lib/components/ui/form'
+	import * as Select from '$lib/components/ui/select'
+	import { Input } from '$lib/components/ui/input'
+	import { defaults, superForm } from 'sveltekit-superforms'
+	import { zod } from 'sveltekit-superforms/adapters'
+	import { bingxAPISchema, intervals } from './schema'
+	import { CalendarIcon } from 'lucide-svelte'
+	import { Calendar } from '$lib/components/ui/calendar/index.js'
+	import * as Popover from '$lib/components/ui/popover/index.js'
+	import {
+		CalendarDate,
+		DateFormatter,
+		type DateValue,
+		getLocalTimeZone,
+		parseDate,
+		today,
+	} from '@internationalized/date'
+	import { cn } from '$lib/utils.js'
+
+	import { buttonVariants } from '$lib/components/ui/button'
+	import axios from 'axios'
+
+	const apiEndpoint =
+		'https://open-api.bingx.io/openApi/swap/v3/quote/klines'
+
+	const form = superForm(
+		defaults(zod(bingxAPISchema), {
+			defaults: {
+				limit: 500,
+				symbol: 'BTC-USDT',
+				interval: '1h',
+				start: '2024-11-15',
+				startTime: '00:00',
+				end: '2024-11-15',
+				endTime: '00:00',
+			},
+		}),
+		{
+			resetForm: false,
+			SPA: true,
+			validators: zod(bingxAPISchema),
+			onUpdated: async ({ form }) => {
+				if (!form.valid) return
+
+				console.log(form.data)
+				// Form validation
+				const url = new URL(apiEndpoint)
+				url.searchParams.set('symbol', form.data.symbol)
+				url.searchParams.set('interval', form.data.interval)
+
+				const start = new Date(
+					form.data.start + ' ' + form.data.startTime + ':00',
+				)
+				url.searchParams.set('start', start.getTime().toString())
+
+				const end = new Date(
+					form.data.end + ' ' + form.data.endTime + ':00',
+				)
+
+				url.searchParams.set('end', end.getTime().toString())
+
+				if (form.data.limit)
+					url.searchParams.set('limit', form.data.limit.toString())
+
+				url.searchParams.set(
+					'timestamp',
+					new Date().getTime().toString(),
+				)
+
+				const response = await fetch('/api/bingx', {
+					method: 'POST',
+					body: JSON.stringify({ url }),
+				})
+
+				const data = await response.json()
+
+				const list = data.data as {
+					open: string
+					close: string
+					high: string
+					low: string
+					volume: string
+					time: number
+				}[]
+
+				let csvContent =
+					'data:text/csv;charset=utf-8,' +
+					'openPrice,closePrice,highPrice,lowPrice,volume,startTime\n' +
+					list
+						.map((data) => {
+							let newData = []
+							newData.push(data.open)
+							newData.push(data.close)
+							newData.push(data.high)
+							newData.push(data.low)
+							newData.push(data.volume)
+							newData.push(
+								new Date(data.time)
+									.toLocaleString()
+									.replace(',', ' |'),
+							)
+							return newData
+						})
+						.map((e: any) => e.join(','))
+						.join('\n')
+
+				var encodedUri = encodeURI(csvContent)
+				var link = document.createElement('a')
+				link.setAttribute('href', encodedUri)
+				link.setAttribute('download', 'data.csv')
+				document.body.appendChild(link)
+
+				link.click()
+			},
+		},
+	)
+
+	const { form: formData, enhance } = form
+
+	const df = new DateFormatter('en-US', {
+		dateStyle: 'long',
+	})
+
+	let start = $state<DateValue | undefined>()
+	let end = $state<DateValue | undefined>()
+
+	$effect(() => {
+		start = $formData.start ? parseDate($formData.start) : undefined
+		end = $formData.end ? parseDate($formData.end) : undefined
+	})
+
+	let placeholder = $state<DateValue>(today(getLocalTimeZone()))
+</script>
+
+<form method="POST" use:enhance>
+	<Form.Field {form} name="symbol">
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Symbol</Form.Label>
+				<Input {...props} bind:value={$formData.symbol} />
+			{/snippet}
+		</Form.Control>
+		<Form.Description>Symbol</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="limit">
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Limit</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.limit}
+					type="number" />
+			{/snippet}
+		</Form.Control>
+		<Form.Description>Limit</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="interval">
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Interval</Form.Label>
+				<Select.Root
+					type="single"
+					bind:value={$formData.interval}
+					name={props.name}>
+					<Select.Trigger {...props}>
+						{$formData.interval ?? 'Select a interval'}
+					</Select.Trigger>
+					<Select.Content>
+						{#each intervals as interval}
+							<Select.Item value={interval} label={interval} />
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{/snippet}
+		</Form.Control>
+		<Form.Description>Interval</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="start" class="flex flex-col">
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Start Date</Form.Label>
+				<Popover.Root>
+					<Popover.Trigger
+						{...props}
+						class={cn(
+							buttonVariants({ variant: 'outline' }),
+							'w-[280px] justify-start pl-4 text-left font-normal',
+							!start && 'text-muted-foreground',
+						)}>
+						{start
+							? df.format(start.toDate(getLocalTimeZone()))
+							: 'Pick a date'}
+						<CalendarIcon class="ml-auto size-4 opacity-50" />
+					</Popover.Trigger>
+					<Popover.Content class="w-auto p-0" side="top">
+						<Calendar
+							type="single"
+							value={start as DateValue}
+							bind:placeholder
+							minValue={new CalendarDate(1900, 1, 1)}
+							maxValue={today(getLocalTimeZone())}
+							calendarLabel="Date of birth"
+							onValueChange={(v) => {
+								if (v) {
+									$formData.start = v.toString()
+								} else {
+									$formData.start = ''
+								}
+							}} />
+					</Popover.Content>
+				</Popover.Root>
+				<Form.Description>Start Date</Form.Description>
+				<Form.FieldErrors />
+				<input hidden value={$formData.start} name={props.name} />
+			{/snippet}
+		</Form.Control>
+	</Form.Field>
+	<Form.Field {form} name="startTime">
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>Start Time</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.startTime}
+					type="time" />
+			{/snippet}
+		</Form.Control>
+		<Form.Description>Start Time</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="end" class="flex flex-col">
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>End Date</Form.Label>
+				<Popover.Root>
+					<Popover.Trigger
+						{...props}
+						class={cn(
+							buttonVariants({ variant: 'outline' }),
+							'w-[280px] justify-start pl-4 text-left font-normal',
+							!end && 'text-muted-foreground',
+						)}>
+						{end
+							? df.format(end.toDate(getLocalTimeZone()))
+							: 'Pick a date'}
+						<CalendarIcon class="ml-auto size-4 opacity-50" />
+					</Popover.Trigger>
+					<Popover.Content class="w-auto p-0" side="top">
+						<Calendar
+							type="single"
+							value={end as DateValue}
+							bind:placeholder
+							minValue={new CalendarDate(1900, 1, 1)}
+							maxValue={today(getLocalTimeZone())}
+							calendarLabel="Date of birth"
+							onValueChange={(v) => {
+								if (v) {
+									$formData.end = v.toString()
+								} else {
+									$formData.end = ''
+								}
+							}} />
+					</Popover.Content>
+				</Popover.Root>
+				<Form.Description>End Date</Form.Description>
+				<Form.FieldErrors />
+				<input hidden value={$formData.end} name={props.name} />
+			{/snippet}
+		</Form.Control>
+	</Form.Field>
+	<Form.Field {form} name="endTime">
+		<Form.Control>
+			{#snippet children({ props })}
+				<Form.Label>End Time</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.endTime}
+					type="time" />
+			{/snippet}
+		</Form.Control>
+		<Form.Description>End Time</Form.Description>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Button>Submit</Form.Button>
+</form>
diff --git a/src/routes/(components)/schema.ts b/src/routes/(components)/schema.ts
new file mode 100644
index 0000000..b4155f4
--- /dev/null
+++ b/src/routes/(components)/schema.ts
@@ -0,0 +1,46 @@
+import { z } from 'zod'
+
+export type Interval =
+	| '1m'
+	| '3m'
+	| '5m'
+	| '15m'
+	| '30m'
+	| '1h'
+	| '2h'
+	| '4h'
+	| '6h'
+	| '8h'
+	| '12h'
+	| '1d'
+	| '3d'
+	| '1w'
+	| '1M'
+
+export const intervals: Interval[] = [
+	'1m',
+	'3m',
+	'5m',
+	'15m',
+	'30m',
+	'1h',
+	'2h',
+	'4h',
+	'6h',
+	'8h',
+	'12h',
+	'1d',
+	'3d',
+	'1w',
+	'1M',
+]
+
+export const bingxAPISchema = z.object({
+	symbol: z.string(),
+	interval: z.custom<Interval>(),
+	start: z.string().min(1),
+	startTime: z.string().min(1),
+	end: z.string().min(1),
+	endTime: z.string().min(1),
+	limit: z.number().int().min(1).max(1000).optional(),
+})
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ae0c079..26cae85 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,8 @@
 	import { CalendarIcon } from 'lucide-svelte'
 	import { Calendar } from '$lib/components/ui/calendar/index.js'
 	import * as Popover from '$lib/components/ui/popover/index.js'
+	import * as Card from '$lib/components/ui/card/index.js'
+	import * as Tabs from '$lib/components/ui/tabs/index.js'
 	import {
 		CalendarDate,
 		DateFormatter,
@@ -19,6 +21,8 @@
 	} from '@internationalized/date'
 	import { cn } from '$lib/utils.js'
 	import { buttonVariants } from '$lib/components/ui/button'
+	import Bingx from './(components)/bingx.svelte'
+	import { ScrollArea } from '$lib/components/ui/scroll-area'
 
 	let { data } = $props()
 
@@ -100,183 +104,208 @@
 	let placeholder = $state<DateValue>(today(getLocalTimeZone()))
 </script>
 
-<form method="POST" use:enhance>
-	<Form.Field {form} name="symbol">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Symbol</Form.Label>
-				<Input {...props} bind:value={$formData.symbol} />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Symbol</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="limit">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Limit</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.limit}
-					type="number" />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Limit</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="category">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Category</Form.Label>
-				<Select.Root
-					type="single"
-					bind:value={$formData.category}
-					name={props.name}>
-					<Select.Trigger {...props}>
-						{$formData.category ?? 'Select a category'}
-					</Select.Trigger>
-					<Select.Content>
-						{#each categories as category}
-							<Select.Item value={category} label={category} />
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Category</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="interval">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Interval</Form.Label>
-				<Select.Root
-					type="single"
-					bind:value={$formData.interval}
-					name={props.name}>
-					<Select.Trigger {...props}>
-						{$formData.interval ?? 'Select a interval'}
-					</Select.Trigger>
-					<Select.Content>
-						{#each intervals as interval}
-							<Select.Item value={interval} label={interval} />
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Category</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="start" class="flex flex-col">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Start Date</Form.Label>
-				<Popover.Root>
-					<Popover.Trigger
-						{...props}
-						class={cn(
-							buttonVariants({ variant: 'outline' }),
-							'w-[280px] justify-start pl-4 text-left font-normal',
-							!start && 'text-muted-foreground',
-						)}>
-						{start
-							? df.format(start.toDate(getLocalTimeZone()))
-							: 'Pick a date'}
-						<CalendarIcon class="ml-auto size-4 opacity-50" />
-					</Popover.Trigger>
-					<Popover.Content class="w-auto p-0" side="top">
-						<Calendar
-							type="single"
-							value={start as DateValue}
-							bind:placeholder
-							minValue={new CalendarDate(1900, 1, 1)}
-							maxValue={today(getLocalTimeZone())}
-							calendarLabel="Date of birth"
-							onValueChange={(v) => {
-								if (v) {
-									$formData.start = v.toString()
-								} else {
-									$formData.start = ''
-								}
-							}} />
-					</Popover.Content>
-				</Popover.Root>
-				<Form.Description>
-					Your date of birth is used to calculator your age
-				</Form.Description>
-				<Form.FieldErrors />
-				<input hidden value={$formData.start} name={props.name} />
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	<Form.Field {form} name="startTime">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>Start Time</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.startTime}
-					type="time" />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Limit</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Field {form} name="end" class="flex flex-col">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>End Date</Form.Label>
-				<Popover.Root>
-					<Popover.Trigger
-						{...props}
-						class={cn(
-							buttonVariants({ variant: 'outline' }),
-							'w-[280px] justify-start pl-4 text-left font-normal',
-							!end && 'text-muted-foreground',
-						)}>
-						{end
-							? df.format(end.toDate(getLocalTimeZone()))
-							: 'Pick a date'}
-						<CalendarIcon class="ml-auto size-4 opacity-50" />
-					</Popover.Trigger>
-					<Popover.Content class="w-auto p-0" side="top">
-						<Calendar
-							type="single"
-							value={end as DateValue}
-							bind:placeholder
-							minValue={new CalendarDate(1900, 1, 1)}
-							maxValue={today(getLocalTimeZone())}
-							calendarLabel="Date of birth"
-							onValueChange={(v) => {
-								if (v) {
-									$formData.end = v.toString()
-								} else {
-									$formData.end = ''
-								}
-							}} />
-					</Popover.Content>
-				</Popover.Root>
-				<Form.Description>
-					Your date of birth is used to calculator your age
-				</Form.Description>
-				<Form.FieldErrors />
-				<input hidden value={$formData.end} name={props.name} />
-			{/snippet}
-		</Form.Control>
-	</Form.Field>
-	<Form.Field {form} name="endTime">
-		<Form.Control>
-			{#snippet children({ props })}
-				<Form.Label>End Time</Form.Label>
-				<Input
-					{...props}
-					bind:value={$formData.endTime}
-					type="time" />
-			{/snippet}
-		</Form.Control>
-		<Form.Description>Limit</Form.Description>
-		<Form.FieldErrors />
-	</Form.Field>
-	<Form.Button>Submit</Form.Button>
-</form>
+<div class="flex justify-center">
+	<Card.Root>
+		<Card.Content>
+			<Tabs.Root value="bybit" class="w-[400px]">
+				<Tabs.List>
+					<Tabs.Trigger value="bybit">ByBit</Tabs.Trigger>
+					<Tabs.Trigger value="bingx">BingX</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content value="bybit">
+					<form method="POST" use:enhance>
+						<Form.Field {form} name="symbol">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>Symbol</Form.Label>
+									<Input {...props} bind:value={$formData.symbol} />
+								{/snippet}
+							</Form.Control>
+							<Form.Description>Symbol</Form.Description>
+							<Form.FieldErrors />
+						</Form.Field>
+						<Form.Field {form} name="limit">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>Limit</Form.Label>
+									<Input
+										{...props}
+										bind:value={$formData.limit}
+										type="number" />
+								{/snippet}
+							</Form.Control>
+							<Form.Description>Limit</Form.Description>
+							<Form.FieldErrors />
+						</Form.Field>
+						<Form.Field {form} name="category">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>Category</Form.Label>
+									<Select.Root
+										type="single"
+										bind:value={$formData.category}
+										name={props.name}>
+										<Select.Trigger {...props}>
+											{$formData.category ?? 'Select a category'}
+										</Select.Trigger>
+										<Select.Content>
+											{#each categories as category}
+												<Select.Item
+													value={category}
+													label={category} />
+											{/each}
+										</Select.Content>
+									</Select.Root>
+								{/snippet}
+							</Form.Control>
+							<Form.Description>Category</Form.Description>
+							<Form.FieldErrors />
+						</Form.Field>
+						<Form.Field {form} name="interval">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>Interval</Form.Label>
+									<Select.Root
+										type="single"
+										bind:value={$formData.interval}
+										name={props.name}>
+										<Select.Trigger {...props}>
+											{$formData.interval ?? 'Select a interval'}
+										</Select.Trigger>
+										<Select.Content>
+											{#each intervals as interval}
+												<Select.Item
+													value={interval}
+													label={interval} />
+											{/each}
+										</Select.Content>
+									</Select.Root>
+								{/snippet}
+							</Form.Control>
+							<Form.Description>Interval</Form.Description>
+							<Form.FieldErrors />
+						</Form.Field>
+						<Form.Field {form} name="start" class="flex flex-col">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>Start Date</Form.Label>
+									<Popover.Root>
+										<Popover.Trigger
+											{...props}
+											class={cn(
+												buttonVariants({ variant: 'outline' }),
+												'w-[280px] justify-start pl-4 text-left font-normal',
+												!start && 'text-muted-foreground',
+											)}>
+											{start
+												? df.format(start.toDate(getLocalTimeZone()))
+												: 'Pick a date'}
+											<CalendarIcon
+												class="ml-auto size-4 opacity-50" />
+										</Popover.Trigger>
+										<Popover.Content class="w-auto p-0" side="top">
+											<Calendar
+												type="single"
+												value={start as DateValue}
+												bind:placeholder
+												minValue={new CalendarDate(1900, 1, 1)}
+												maxValue={today(getLocalTimeZone())}
+												calendarLabel="Date of birth"
+												onValueChange={(v) => {
+													if (v) {
+														$formData.start = v.toString()
+													} else {
+														$formData.start = ''
+													}
+												}} />
+										</Popover.Content>
+									</Popover.Root>
+									<Form.Description>Start Time</Form.Description>
+									<Form.FieldErrors />
+									<input
+										hidden
+										value={$formData.start}
+										name={props.name} />
+								{/snippet}
+							</Form.Control>
+						</Form.Field>
+						<Form.Field {form} name="startTime">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>Start Time</Form.Label>
+									<Input
+										{...props}
+										bind:value={$formData.startTime}
+										type="time" />
+								{/snippet}
+							</Form.Control>
+							<Form.Description>Start Time</Form.Description>
+							<Form.FieldErrors />
+						</Form.Field>
+						<Form.Field {form} name="end" class="flex flex-col">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>End Date</Form.Label>
+									<Popover.Root>
+										<Popover.Trigger
+											{...props}
+											class={cn(
+												buttonVariants({ variant: 'outline' }),
+												'w-[280px] justify-start pl-4 text-left font-normal',
+												!end && 'text-muted-foreground',
+											)}>
+											{end
+												? df.format(end.toDate(getLocalTimeZone()))
+												: 'Pick a date'}
+											<CalendarIcon
+												class="ml-auto size-4 opacity-50" />
+										</Popover.Trigger>
+										<Popover.Content class="w-auto p-0" side="top">
+											<Calendar
+												type="single"
+												value={end as DateValue}
+												bind:placeholder
+												minValue={new CalendarDate(1900, 1, 1)}
+												maxValue={today(getLocalTimeZone())}
+												calendarLabel="Date of birth"
+												onValueChange={(v) => {
+													if (v) {
+														$formData.end = v.toString()
+													} else {
+														$formData.end = ''
+													}
+												}} />
+										</Popover.Content>
+									</Popover.Root>
+									<Form.Description>End Date</Form.Description>
+									<Form.FieldErrors />
+									<input
+										hidden
+										value={$formData.end}
+										name={props.name} />
+								{/snippet}
+							</Form.Control>
+						</Form.Field>
+						<Form.Field {form} name="endTime">
+							<Form.Control>
+								{#snippet children({ props })}
+									<Form.Label>End Time</Form.Label>
+									<Input
+										{...props}
+										bind:value={$formData.endTime}
+										type="time" />
+								{/snippet}
+							</Form.Control>
+							<Form.Description>End Time</Form.Description>
+							<Form.FieldErrors />
+						</Form.Field>
+						<Form.Button>Submit</Form.Button>
+					</form>
+				</Tabs.Content>
+				<Tabs.Content value="bingx">
+					<Bingx />
+				</Tabs.Content>
+			</Tabs.Root>
+		</Card.Content>
+	</Card.Root>
+</div>
diff --git a/src/routes/api/bingx/+server.ts b/src/routes/api/bingx/+server.ts
new file mode 100644
index 0000000..533f62b
--- /dev/null
+++ b/src/routes/api/bingx/+server.ts
@@ -0,0 +1,10 @@
+import { json } from '@sveltejs/kit'
+import type { RequestHandler } from '../$types'
+
+export const POST: RequestHandler = async ({ request }) => {
+	const body = await request.json()
+
+	const response = await fetch(body.url)
+
+	return json(await response.json())
+}