diff --git a/frontend/app/web-gold/package.json b/frontend/app/web-gold/package.json
index 6f4d82feaa..42ef64d32e 100644
--- a/frontend/app/web-gold/package.json
+++ b/frontend/app/web-gold/package.json
@@ -20,6 +20,7 @@
     "@ai-sdk/openai": "^3.0.12",
     "@ant-design/icons-vue": "^7.0.1",
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@vueuse/core": "^14.2.1",
     "ai": "^6.0.39",
     "ant-design-vue": "^4.2.6",
     "aplayer": "^1.10.1",
@@ -32,6 +33,7 @@
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.5.0",
     "qs": "^6.14.0",
+    "reka-ui": "^2.9.2",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1",
     "vue": "^3.5.22",
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialog.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000000..b6e6b4bf89
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogAction.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000000..09cf6fcbcb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogCancel.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000000..e261894e50
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogContent.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000000..4597f0dc62
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogDescription.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000000..69642c9a57
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogFooter.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000000..50d4098eaa
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-footer"
+    :class="
+      cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogHeader.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000000..dbe72a764e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogTitle.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000000..bb97e4d4a1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000000..98d40ee089
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert-dialog/index.ts b/frontend/app/web-gold/src/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000000..cf1b45dff8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/alert/Alert.vue b/frontend/app/web-gold/src/components/ui/alert/Alert.vue
new file mode 100644
index 0000000000..a9d336ffac
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert/Alert.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert/AlertDescription.vue b/frontend/app/web-gold/src/components/ui/alert/AlertDescription.vue
new file mode 100644
index 0000000000..9f7d24dfdd
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert/AlertTitle.vue b/frontend/app/web-gold/src/components/ui/alert/AlertTitle.vue
new file mode 100644
index 0000000000..b2183843dc
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/alert/index.ts b/frontend/app/web-gold/src/components/ui/alert/index.ts
new file mode 100644
index 0000000000..42d07b64cf
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/frontend/app/web-gold/src/components/ui/aspect-ratio/AspectRatio.vue b/frontend/app/web-gold/src/components/ui/aspect-ratio/AspectRatio.vue
new file mode 100644
index 0000000000..857c208de2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AspectRatioProps } from "reka-ui"
+import { AspectRatio } from "reka-ui"
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio
+    v-slot="slotProps"
+    data-slot="aspect-ratio"
+    v-bind="props"
+  >
+    <slot v-bind="slotProps" />
+  </AspectRatio>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/aspect-ratio/index.ts b/frontend/app/web-gold/src/components/ui/aspect-ratio/index.ts
new file mode 100644
index 0000000000..e658f55a05
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/aspect-ratio/index.ts
@@ -0,0 +1 @@
+export { default as AspectRatio } from "./AspectRatio.vue"
diff --git a/frontend/app/web-gold/src/components/ui/avatar/Avatar.vue b/frontend/app/web-gold/src/components/ui/avatar/Avatar.vue
new file mode 100644
index 0000000000..bb7e669f97
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/avatar/Avatar.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/avatar/AvatarFallback.vue b/frontend/app/web-gold/src/components/ui/avatar/AvatarFallback.vue
new file mode 100644
index 0000000000..16b588ae38
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/avatar/AvatarImage.vue b/frontend/app/web-gold/src/components/ui/avatar/AvatarImage.vue
new file mode 100644
index 0000000000..24a81664eb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/avatar/AvatarImage.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/avatar/index.ts b/frontend/app/web-gold/src/components/ui/avatar/index.ts
new file mode 100644
index 0000000000..cf0e003186
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/avatar/index.ts
@@ -0,0 +1,3 @@
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"
diff --git a/frontend/app/web-gold/src/components/ui/badge/Badge.vue b/frontend/app/web-gold/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000000..d894dfe08a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/badge/Badge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/badge/index.ts b/frontend/app/web-gold/src/components/ui/badge/index.ts
new file mode 100644
index 0000000000..bbc0dfa3b2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/frontend/app/web-gold/src/components/ui/button/Button.vue b/frontend/app/web-gold/src/components/ui/button/Button.vue
new file mode 100644
index 0000000000..3763470a1a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/button/Button.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/button/index.ts b/frontend/app/web-gold/src/components/ui/button/index.ts
new file mode 100644
index 0000000000..26e2c559c1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/button/index.ts
@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/Calendar.vue b/frontend/app/web-gold/src/components/ui/calendar/Calendar.vue
new file mode 100644
index 0000000000..56a650c54a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/Calendar.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui"
+import type { HTMLAttributes, Ref } from "vue"
+import type { LayoutTypes } from "."
+import { getLocalTimeZone, today } from "@internationalized/date"
+import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui"
+import { createYear, createYearRange, toDate } from "reka-ui/date"
+import { computed, toRaw } from "vue"
+import { cn } from "@/lib/utils"
+import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+
+const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
+  modelValue: undefined,
+  layout: undefined,
+})
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder")
+
+const placeholder = useVModel(props, "placeholder", emits, {
+  passive: true,
+  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>
+
+const formatter = useDateFormatter(props.locale ?? "en")
+
+const yearRange = computed(() => {
+  return props.yearRange ?? createYearRange({
+    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
+      .cycle("year", -100),
+
+    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
+      .cycle("year", 10),
+  })
+})
+
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DefineMonthTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { month: 'short' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="(e: Event) => {
+            placeholder = placeholder.set({
+              month: Number((e?.target as any)?.value),
+            })
+          }"
+        >
+          <NativeSelectOption v-for="(month) in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
+            {{ formatter.custom(toDate(month), { month: 'short' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineMonthTemplate>
+
+  <DefineYearTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="(e: Event) => {
+            placeholder = placeholder.set({
+              year: Number((e?.target as any)?.value),
+            })
+          }"
+        >
+          <NativeSelectOption v-for="(year) in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
+            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineYearTemplate>
+
+  <CalendarRoot
+    v-slot="{ grid, weekDays, date }"
+    v-bind="forwarded"
+    v-model:placeholder="placeholder"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+  >
+    <CalendarHeader class="pt-0">
+      <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
+        <CalendarPrevButton>
+          <slot name="calendar-prev-icon" />
+        </CalendarPrevButton>
+        <CalendarNextButton>
+          <slot name="calendar-next-icon" />
+        </CalendarNextButton>
+      </nav>
+
+      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+        <template v-if="layout === 'month-and-year'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else-if="layout === 'month-only'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+          </div>
+        </template>
+        <template v-else-if="layout === 'year-only'">
+          <div class="flex items-center justify-center gap-1">
+            {{ formatter.custom(toDate(date), { month: 'short' }) }}
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else>
+          <CalendarHeading />
+        </template>
+      </slot>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarCell.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarCell.vue
new file mode 100644
index 0000000000..c24c48b7f3
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarCellTrigger.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000000..ddb8dc577c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "button",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarGrid.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarGrid.vue
new file mode 100644
index 0000000000..e6dd7d6b93
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    data-slot="calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarGridBody.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000000..3b9e716a6e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui"
+import { CalendarGridBody } from "reka-ui"
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody
+    data-slot="calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarGridHead.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000000..de1589b605
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { CalendarGridHead } from "reka-ui"
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <CalendarGridHead
+    data-slot="calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarGridRow.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000000..767557d872
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow
+    data-slot="calendar-grid-row"
+    :class="cn('flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarHeadCell.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000000..47fefbc7a9
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell
+    data-slot="calendar-head-cell"
+    :class="cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarHeader.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarHeader.vue
new file mode 100644
index 0000000000..175118dbfd
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader
+    data-slot="calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full px-8', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarHeading.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarHeading.vue
new file mode 100644
index 0000000000..5a11c12f59
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarNextButton.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 0000000000..8552ffa3fa
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { CalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    data-slot="calendar-next-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/CalendarPrevButton.vue b/frontend/app/web-gold/src/components/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 0000000000..b643948a65
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { CalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    data-slot="calendar-prev-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/calendar/index.ts b/frontend/app/web-gold/src/components/ui/calendar/index.ts
new file mode 100644
index 0000000000..552c634b7f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/calendar/index.ts
@@ -0,0 +1,14 @@
+export { default as Calendar } from "./Calendar.vue"
+export { default as CalendarCell } from "./CalendarCell.vue"
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
+export { default as CalendarGrid } from "./CalendarGrid.vue"
+export { default as CalendarGridBody } from "./CalendarGridBody.vue"
+export { default as CalendarGridHead } from "./CalendarGridHead.vue"
+export { default as CalendarGridRow } from "./CalendarGridRow.vue"
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
+export { default as CalendarHeader } from "./CalendarHeader.vue"
+export { default as CalendarHeading } from "./CalendarHeading.vue"
+export { default as CalendarNextButton } from "./CalendarNextButton.vue"
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"
+
+export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined
diff --git a/frontend/app/web-gold/src/components/ui/card/Card.vue b/frontend/app/web-gold/src/components/ui/card/Card.vue
new file mode 100644
index 0000000000..f5a070702a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/Card.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/card/CardAction.vue b/frontend/app/web-gold/src/components/ui/card/CardAction.vue
new file mode 100644
index 0000000000..c91638b6d1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/CardAction.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/card/CardContent.vue b/frontend/app/web-gold/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000000..dfbc5524ec
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/CardContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/card/CardDescription.vue b/frontend/app/web-gold/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000000..71c1b8da44
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/card/CardFooter.vue b/frontend/app/web-gold/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000000..9e3739ed66
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/card/CardHeader.vue b/frontend/app/web-gold/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000000..4fe4da46c5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/card/CardTitle.vue b/frontend/app/web-gold/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000000..5f479e7305
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/card/index.ts b/frontend/app/web-gold/src/components/ui/card/index.ts
new file mode 100644
index 0000000000..16277580b2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/card/index.ts
@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue"
+export { default as CardAction } from "./CardAction.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
diff --git a/frontend/app/web-gold/src/components/ui/carousel/Carousel.vue b/frontend/app/web-gold/src/components/ui/carousel/Carousel.vue
new file mode 100644
index 0000000000..4575682ae8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/Carousel.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useProvideCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: "horizontal",
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
+
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    data-slot="carousel"
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/carousel/CarouselContent.vue b/frontend/app/web-gold/src/components/ui/carousel/CarouselContent.vue
new file mode 100644
index 0000000000..bd3db7e7b2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/CarouselContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    ref="carouselRef"
+    data-slot="carousel-content"
+    class="overflow-hidden"
+  >
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/carousel/CarouselItem.vue b/frontend/app/web-gold/src/components/ui/carousel/CarouselItem.vue
new file mode 100644
index 0000000000..39df4c63eb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/CarouselItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    data-slot="carousel-item"
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/carousel/CarouselNext.vue b/frontend/app/web-gold/src/components/ui/carousel/CarouselNext.vue
new file mode 100644
index 0000000000..63d5ebc57b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/CarouselNext.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from "@/components/ui/button"
+import { ArrowRight } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-next"
+    :disabled="!canScrollNext"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -right-12 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/carousel/CarouselPrevious.vue b/frontend/app/web-gold/src/components/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 0000000000..1473a66ec7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-previous"
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -left-12 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/carousel/index.ts b/frontend/app/web-gold/src/components/ui/carousel/index.ts
new file mode 100644
index 0000000000..154bfcbe91
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/index.ts
@@ -0,0 +1,10 @@
+export { default as Carousel } from "./Carousel.vue"
+export { default as CarouselContent } from "./CarouselContent.vue"
+export { default as CarouselItem } from "./CarouselItem.vue"
+export { default as CarouselNext } from "./CarouselNext.vue"
+export { default as CarouselPrevious } from "./CarouselPrevious.vue"
+export type {
+  UnwrapRefCarouselApi as CarouselApi,
+} from "./interface"
+
+export { useCarousel } from "./useCarousel"
diff --git a/frontend/app/web-gold/src/components/ui/carousel/interface.ts b/frontend/app/web-gold/src/components/ui/carousel/interface.ts
new file mode 100644
index 0000000000..74eaf36d00
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/interface.ts
@@ -0,0 +1,26 @@
+import type useEmblaCarousel from "embla-carousel-vue"
+import type {
+  EmblaCarouselVueType,
+} from "embla-carousel-vue"
+import type { HTMLAttributes, UnwrapRef } from "vue"
+
+type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+}
+
+export interface CarouselEmits {
+  (e: "init-api", payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes["class"]
+}
diff --git a/frontend/app/web-gold/src/components/ui/carousel/useCarousel.ts b/frontend/app/web-gold/src/components/ui/carousel/useCarousel.ts
new file mode 100644
index 0000000000..32e35ca09f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/carousel/useCarousel.ts
@@ -0,0 +1,56 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
+import { createInjectionState } from "@vueuse/core"
+import emblaCarouselVue from "embla-carousel-vue"
+import { onMounted, ref } from "vue"
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on("init", onSelect)
+      emblaApi.value?.on("reInit", onSelect)
+      emblaApi.value?.on("select", onSelect)
+
+      emits("init-api", emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error("useCarousel must be used within a <Carousel />")
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }
diff --git a/frontend/app/web-gold/src/components/ui/chart/ChartContainer.vue b/frontend/app/web-gold/src/components/ui/chart/ChartContainer.vue
new file mode 100644
index 0000000000..b4357f9186
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/chart/ChartContainer.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { ChartConfig } from "."
+import { useId } from "reka-ui"
+import { computed, toRefs } from "vue"
+import { cn } from "@/lib/utils"
+import { provideChartContext } from "."
+import ChartStyle from "./ChartStyle.vue"
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  id?: HTMLAttributes["id"]
+  class?: HTMLAttributes["class"]
+  config: ChartConfig
+  cursor?: boolean
+}>()
+
+defineSlots<{
+  default: {
+    id: string
+    config: ChartConfig
+  }
+}>()
+
+const { config } = toRefs(props)
+const uniqueId = useId()
+const chartId = computed(() => `chart-${props.id || uniqueId.replace(/:/g, "")}`)
+
+provideChartContext({
+  id: uniqueId,
+  config,
+})
+</script>
+
+<template>
+  <div
+    data-slot="chart"
+    :data-chart="chartId"
+    :class="cn(
+      `[&_.tick_text]:!fill-muted-foreground [&_.tick_line]:!stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex flex-col aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_[data-vis-xy-container]]:h-full [&_[data-vis-single-container]]:h-full h-full [&_[data-vis-xy-container]]:w-full [&_[data-vis-single-container]]:w-full w-full `,
+      props.class,
+    )"
+    :style="{
+      '--vis-tooltip-padding': '0px',
+      '--vis-tooltip-background-color': 'transparent',
+      '--vis-tooltip-border-color': 'transparent',
+      '--vis-tooltip-text-color': 'none',
+      '--vis-tooltip-shadow-color': 'none',
+      '--vis-tooltip-backdrop-filter': 'none',
+      '--vis-crosshair-circle-stroke-color': '#0000',
+      '--vis-crosshair-line-stroke-width': cursor ? '1px' : '0px',
+      '--vis-font-family': 'var(--font-sans)',
+    }"
+  >
+    <slot :id="uniqueId" :config="config" />
+    <ChartStyle :id="chartId" />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/chart/ChartLegendContent.vue b/frontend/app/web-gold/src/components/ui/chart/ChartLegendContent.vue
new file mode 100644
index 0000000000..32773128c8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/chart/ChartLegendContent.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed, onMounted, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { useChart } from "."
+
+const props = withDefaults(defineProps<{
+  hideIcon?: boolean
+  nameKey?: string
+  verticalAlign?: "bottom" | "top"
+  // payload?: any[]
+  class?: HTMLAttributes["class"]
+}>(), {
+  verticalAlign: "bottom",
+})
+
+const { id, config } = useChart()
+
+const payload = computed(() => Object.entries(config.value).map(([key, value]) => {
+  return {
+    key: props.nameKey || key,
+    itemConfig: config.value[key],
+  }
+}))
+
+const containerSelector = ref("")
+onMounted(() => {
+  containerSelector.value = `[data-chart="chart-${id}"]>[data-vis-xy-container]`
+})
+</script>
+
+<template>
+  <div
+    v-if="containerSelector"
+    :class="cn(
+      'flex items-center justify-center gap-4',
+      verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+      props.class,
+    )"
+  >
+    <div
+      v-for="{ key, itemConfig } in payload"
+      :key="key"
+      :class="cn(
+        '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+      )"
+    >
+      <component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+      <div
+        v-else
+        class="h-2 w-2 shrink-0 rounded-[2px]"
+        :style="{
+          backgroundColor: itemConfig.color,
+        }"
+      />
+
+      {{ itemConfig?.label }}
+    </div>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/chart/ChartStyle.vue b/frontend/app/web-gold/src/components/ui/chart/ChartStyle.vue
new file mode 100644
index 0000000000..d6f59dd404
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/chart/ChartStyle.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { THEMES, useChart } from "."
+
+defineProps<{
+  id?: HTMLAttributes["id"]
+}>()
+
+const { config } = useChart()
+
+const colorConfig = computed(() => {
+  return Object.entries(config.value).filter(
+    ([, config]) => config.theme || config.color,
+  )
+})
+</script>
+
+<template>
+  <Primitive
+    v-if="colorConfig.length"
+    as="style"
+  >
+    {{ Object.entries(THEMES)
+      .map(
+        ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color
+      = itemConfig.theme?.[theme as keyof typeof itemConfig.theme]
+      || itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+        .join("\n")}
+}
+`,
+      )
+      .join("\n") }}
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/chart/ChartTooltipContent.vue b/frontend/app/web-gold/src/components/ui/chart/ChartTooltipContent.vue
new file mode 100644
index 0000000000..e3fa3bcf7e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/chart/ChartTooltipContent.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { ChartConfig } from "."
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<{
+  hideLabel?: boolean
+  hideIndicator?: boolean
+  indicator?: "line" | "dot" | "dashed"
+  nameKey?: string
+  labelKey?: string
+  labelFormatter?: (d: number | Date) => string
+  payload?: Record<string, any>
+  config?: ChartConfig
+  class?: HTMLAttributes["class"]
+  color?: string
+  x?: number | Date
+}>(), {
+  payload: () => ({}),
+  config: () => ({}),
+  indicator: "dot",
+})
+
+// TODO: currently we use `createElement` and `render` to render the
+// const chartContext = useChart(null)
+
+const payload = computed(() => {
+  return Object.entries(props.payload).map(([key, value]) => {
+    // const key = `${props.nameKey || item.name || item.dataKey || "value"}`
+    const itemConfig = props.config[key]
+    const indicatorColor = props.config[key]?.color ?? props.payload.fill
+
+    return { key, value, itemConfig, indicatorColor }
+  }).filter(i => i.itemConfig)
+})
+
+const nestLabel = computed(() => Object.keys(props.payload).length === 1 && props.indicator !== "dot")
+const tooltipLabel = computed(() => {
+  if (props.hideLabel)
+    return null
+  if (props.labelFormatter && props.x !== undefined) {
+    return props.labelFormatter(props.x)
+  }
+  return props.labelKey ? props.config[props.labelKey]?.label || props.payload[props.labelKey] : props.x
+})
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+      props.class,
+    )"
+  >
+    <slot>
+      <div v-if="!nestLabel && tooltipLabel" class="font-medium">
+        {{ tooltipLabel }}
+      </div>
+      <div class="grid gap-1.5">
+        <div
+          v-for="{ value, itemConfig, indicatorColor, key } in payload"
+          :key="key"
+          :class="
+            cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+               indicator === 'dot' && 'items-center')"
+        >
+          <component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+          <template v-else-if="!hideIndicator">
+            <div
+              :class="cn(
+                'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                {
+                  'h-2.5 w-2.5': indicator === 'dot',
+                  'w-1': indicator === 'line',
+                  'w-0 border-[1.5px] border-dashed bg-transparent':
+                    indicator === 'dashed',
+                  'my-0.5': nestLabel && indicator === 'dashed',
+                },
+              )"
+              :style="{
+                '--color-bg': indicatorColor,
+                '--color-border': indicatorColor,
+              }"
+            />
+          </template>
+
+          <div :class="cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')">
+            <div class="grid gap-1.5">
+              <div v-if="nestLabel" class="font-medium">
+                {{ tooltipLabel }}
+              </div>
+              <span class="text-muted-foreground">
+                {{ itemConfig?.label || value }}
+              </span>
+            </div>
+            <span v-if="value" class="text-foreground font-mono font-medium tabular-nums">
+              {{ value.toLocaleString() }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/chart/index.ts b/frontend/app/web-gold/src/components/ui/chart/index.ts
new file mode 100644
index 0000000000..12b8062760
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/chart/index.ts
@@ -0,0 +1,29 @@
+import type { Component, Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as ChartContainer } from "./ChartContainer.vue"
+export { default as ChartLegendContent } from "./ChartLegendContent.vue"
+export { default as ChartTooltipContent } from "./ChartTooltipContent.vue"
+export { componentToString } from "./utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+export const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: string | Component
+    icon?: string | Component
+  } & (
+    | { color?: string, theme?: never }
+    | { color?: never, theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+interface ChartContextProps {
+  id: string
+  config: Ref<ChartConfig>
+}
+
+export const [useChart, provideChartContext] = createContext<ChartContextProps>("Chart")
+
+export { VisCrosshair as ChartCrosshair, VisTooltip as ChartTooltip } from "@unovis/vue"
diff --git a/frontend/app/web-gold/src/components/ui/chart/utils.ts b/frontend/app/web-gold/src/components/ui/chart/utils.ts
new file mode 100644
index 0000000000..b6d0652683
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/chart/utils.ts
@@ -0,0 +1,44 @@
+import type { ChartConfig } from "."
+import { isClient } from "@vueuse/core"
+import { useId } from "reka-ui"
+import { h, render } from "vue"
+
+// Simple cache using a Map to store serialized object keys
+const cache = new Map<string, string>()
+
+// Convert object to a consistent string key
+function serializeKey(key: Record<string, any>): string {
+  return JSON.stringify(key, Object.keys(key).sort())
+}
+
+interface Constructor<P = any> {
+  __isFragment?: never
+  __isTeleport?: never
+  __isSuspense?: never
+  new (...args: any[]): {
+    $props: P
+  }
+}
+
+export function componentToString<P>(config: ChartConfig, component: Constructor<P>, props?: P) {
+  if (!isClient)
+    return
+
+  // This function will be called once during mount lifecycle
+  const id = useId()
+
+  // https://unovis.dev/docs/auxiliary/Crosshair#component-props
+  return (_data: any, x: number | Date) => {
+    const data = "data" in _data ? _data.data : _data
+    const serializedKey = `${id}-${serializeKey(data)}`
+    const cachedContent = cache.get(serializedKey)
+    if (cachedContent)
+      return cachedContent
+
+    const vnode = h<unknown>(component, { ...props, payload: data, config, x })
+    const div = document.createElement("div")
+    render(vnode, div)
+    cache.set(serializedKey, div.innerHTML)
+    return div.innerHTML
+  }
+}
diff --git a/frontend/app/web-gold/src/components/ui/combobox/Combobox.vue b/frontend/app/web-gold/src/components/ui/combobox/Combobox.vue
new file mode 100644
index 0000000000..0e6907c438
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/Combobox.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from "reka-ui"
+import { ComboboxRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-slot="slotProps"
+    data-slot="combobox"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </ComboboxRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxAnchor.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxAnchor.vue
new file mode 100644
index 0000000000..5b9041d420
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxAnchor.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxAnchor, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxAnchor
+    data-slot="combobox-anchor"
+    v-bind="forwarded"
+    :class="cn('w-[200px]', props.class)"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxEmpty.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxEmpty.vue
new file mode 100644
index 0000000000..20beb63bf4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxEmpty.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxEmpty } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ComboboxEmpty
+    data-slot="combobox-empty"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxGroup.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxGroup.vue
new file mode 100644
index 0000000000..0dc9fc5b25
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxGroup.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxGroup, ComboboxLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ComboboxGroup
+    data-slot="combobox-group"
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxInput.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxInput.vue
new file mode 100644
index 0000000000..9c783246d1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxInput.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ComboboxInputEmits, ComboboxInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SearchIcon } from "lucide-vue-next"
+import { ComboboxInput, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const emits = defineEmits<ComboboxInputEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <SearchIcon class="size-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      data-slot="command-input"
+      :class="cn(
+        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )"
+
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+    </ComboboxInput>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxItem.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxItem.vue
new file mode 100644
index 0000000000..cccf98ca60
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxItem, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    data-slot="combobox-item"
+    v-bind="forwarded"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxItemIndicator.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxItemIndicator.vue
new file mode 100644
index 0000000000..2e1b07cac9
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxItemIndicator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxItemIndicatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxItemIndicator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxItemIndicator
+    data-slot="combobox-item-indicator"
+    v-bind="forwarded"
+    :class="cn('ml-auto', props.class)"
+  >
+    <slot />
+  </ComboboxItemIndicator>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxList.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxList.vue
new file mode 100644
index 0000000000..64c9a845ba
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxList.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(), {
+  position: "popper",
+  align: "center",
+  sideOffset: 4,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxPortal>
+    <ComboboxContent
+      data-slot="combobox-list"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxSeparator.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxSeparator.vue
new file mode 100644
index 0000000000..05d648b460
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxSeparator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ComboboxSeparator
+    data-slot="combobox-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxTrigger.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxTrigger.vue
new file mode 100644
index 0000000000..28b099aa25
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxTrigger.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxTrigger
+    data-slot="combobox-trigger"
+    v-bind="forwarded"
+    :class="cn('', props.class)"
+    tabindex="0"
+  >
+    <slot />
+  </ComboboxTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/ComboboxViewport.vue b/frontend/app/web-gold/src/components/ui/combobox/ComboboxViewport.vue
new file mode 100644
index 0000000000..684085cc58
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/ComboboxViewport.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ComboboxViewport, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxViewport
+    data-slot="combobox-viewport"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <slot />
+  </ComboboxViewport>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/combobox/index.ts b/frontend/app/web-gold/src/components/ui/combobox/index.ts
new file mode 100644
index 0000000000..7c7bfc7852
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/combobox/index.ts
@@ -0,0 +1,12 @@
+export { default as Combobox } from "./Combobox.vue"
+export { default as ComboboxAnchor } from "./ComboboxAnchor.vue"
+export { default as ComboboxEmpty } from "./ComboboxEmpty.vue"
+export { default as ComboboxGroup } from "./ComboboxGroup.vue"
+export { default as ComboboxInput } from "./ComboboxInput.vue"
+export { default as ComboboxItem } from "./ComboboxItem.vue"
+export { default as ComboboxItemIndicator } from "./ComboboxItemIndicator.vue"
+export { default as ComboboxList } from "./ComboboxList.vue"
+export { default as ComboboxSeparator } from "./ComboboxSeparator.vue"
+export { default as ComboboxViewport } from "./ComboboxViewport.vue"
+
+export { ComboboxCancel, ComboboxTrigger } from "reka-ui"
diff --git a/frontend/app/web-gold/src/components/ui/command/Command.vue b/frontend/app/web-gold/src/components/ui/command/Command.vue
new file mode 100644
index 0000000000..dcdf9d6031
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/Command.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
+import { reactive, ref, watch } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandContext } from "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandDialog.vue b/frontend/app/web-gold/src/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000000..a48f018b8f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandDialog.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { useForwardPropsEmits } from "reka-ui"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import Command from "./Command.vue"
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: "Command Palette",
+  description: "Search for a command to run...",
+})
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-slot="slotProps" v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot v-bind="slotProps" />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandEmpty.vue b/frontend/app/web-gold/src/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000000..489c4064de
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandGroup.vue b/frontend/app/web-gold/src/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000000..a5dd55e345
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandGroup.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandGroupContext, useCommand } from "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandInput.vue b/frontend/app/web-gold/src/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000000..653141e4d2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandInput.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Search } from "lucide-vue-next"
+import { ListboxFilter, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <Search class="size-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandItem.vue b/frontend/app/web-gold/src/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000000..2ae4827d12
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useCurrentElement } from "@vueuse/core"
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand, useCommandGroup } from "."
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandList.vue b/frontend/app/web-gold/src/components/ui/command/CommandList.vue
new file mode 100644
index 0000000000..928d2f0f7b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxContent, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandSeparator.vue b/frontend/app/web-gold/src/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000000..6def19ecef
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/CommandShortcut.vue b/frontend/app/web-gold/src/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000000..e1d0e07afd
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/command/index.ts b/frontend/app/web-gold/src/components/ui/command/index.ts
new file mode 100644
index 0000000000..af18933b6b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>("Command")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenu.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenu.vue
new file mode 100644
index 0000000000..b4c6c09345
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui"
+import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<ContextMenuRootProps>()
+const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRoot
+    data-slot="context-menu"
+    v-bind="forwarded"
+  >
+    <slot />
+  </ContextMenuRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuCheckboxItem.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 0000000000..ba62d4314c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    data-slot="context-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuContent.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuContent.vue
new file mode 100644
index 0000000000..2fbc5568ce
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuContent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      data-slot="context-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuGroup.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuGroup.vue
new file mode 100644
index 0000000000..9af9b2665c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuGroupProps } from "reka-ui"
+import { ContextMenuGroup } from "reka-ui"
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup
+    data-slot="context-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </ContextMenuGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuItem.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuItem.vue
new file mode 100644
index 0000000000..b6a4c48e54
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuItem.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ContextMenuItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>(), {
+  variant: "default",
+})
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    data-slot="context-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuLabel.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuLabel.vue
new file mode 100644
index 0000000000..80d051957a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ContextMenuLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ContextMenuLabel
+    data-slot="context-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="delegatedProps"
+    :class="cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuPortal.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuPortal.vue
new file mode 100644
index 0000000000..c50a2b3306
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuPortal.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuPortalProps } from "reka-ui"
+import { ContextMenuPortal } from "reka-ui"
+
+const props = defineProps<ContextMenuPortalProps>()
+</script>
+
+<template>
+  <ContextMenuPortal
+    data-slot="context-menu-portal"
+    v-bind="props"
+  >
+    <slot />
+  </ContextMenuPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuRadioGroup.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 0000000000..25372ed829
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "reka-ui"
+import {
+  ContextMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRadioGroup
+    data-slot="context-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuRadioItem.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 0000000000..181acaa876
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    data-slot="context-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSeparator.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 0000000000..d7f0c60f04
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ContextMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuSeparator,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ContextMenuSeparator
+    data-slot="context-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuShortcut.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 0000000000..2631d68261
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="context-menu-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSub.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSub.vue
new file mode 100644
index 0000000000..aeb1835ccc
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSub.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from "reka-ui"
+import {
+  ContextMenuSub,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<ContextMenuSubProps>()
+const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuSub
+    data-slot="context-menu-sub"
+    v-bind="forwarded"
+  >
+    <slot />
+  </ContextMenuSub>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSubContent.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 0000000000..c4fcafdad2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuSubContent
+    data-slot="context-menu-sub-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSubTrigger.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 0000000000..12d2210e9c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import {
+  ContextMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    data-slot="context-menu-sub-trigger"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto" />
+  </ContextMenuSubTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuTrigger.vue b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 0000000000..70a8143ff9
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from "reka-ui"
+import { ContextMenuTrigger, useForwardProps } from "reka-ui"
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger
+    data-slot="context-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </ContextMenuTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/context-menu/index.ts b/frontend/app/web-gold/src/components/ui/context-menu/index.ts
new file mode 100644
index 0000000000..5919fd37d5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/context-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from "./ContextMenu.vue"
+export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue"
+export { default as ContextMenuContent } from "./ContextMenuContent.vue"
+export { default as ContextMenuGroup } from "./ContextMenuGroup.vue"
+export { default as ContextMenuItem } from "./ContextMenuItem.vue"
+export { default as ContextMenuLabel } from "./ContextMenuLabel.vue"
+export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue"
+export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue"
+export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue"
+export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue"
+export { default as ContextMenuSub } from "./ContextMenuSub.vue"
+export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue"
+export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue"
+export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/dialog/Dialog.vue b/frontend/app/web-gold/src/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000000..ade5260377
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/Dialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogClose.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000000..c5fae043f7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogContent.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000000..7f86b47787
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogDescription.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000000..f52e6555e9
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogFooter.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000000..0a936e6166
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogHeader.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000000..bfc3c646e6
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogOverlay.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogOverlay.vue
new file mode 100644
index 0000000000..77900772a0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogScrollContent.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000000..f2475dbaed
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogTitle.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000000..860f01a486
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/DialogTrigger.vue b/frontend/app/web-gold/src/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000000..49667e997b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dialog/index.ts b/frontend/app/web-gold/src/components/ui/dialog/index.ts
new file mode 100644
index 0000000000..6768b090cc
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dialog/index.ts
@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/drawer/Drawer.vue b/frontend/app/web-gold/src/components/ui/drawer/Drawer.vue
new file mode 100644
index 0000000000..5428e35c16
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/Drawer.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue"
+import { useForwardPropsEmits } from "reka-ui"
+import { DrawerRoot } from "vaul-vue"
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+})
+
+const emits = defineEmits<DrawerRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerRoot
+    v-slot="slotProps"
+    data-slot="drawer"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DrawerRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerClose.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerClose.vue
new file mode 100644
index 0000000000..eecc11b7f0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerClose.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { DrawerCloseProps } from "vaul-vue"
+import { DrawerClose } from "vaul-vue"
+
+const props = defineProps<DrawerCloseProps>()
+</script>
+
+<template>
+  <DrawerClose
+    data-slot="drawer-close"
+    v-bind="props"
+  >
+    <slot />
+  </DrawerClose>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerContent.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerContent.vue
new file mode 100644
index 0000000000..5994c854cd
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerContent.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { useForwardPropsEmits } from "reka-ui"
+import { DrawerContent, DrawerPortal } from "vaul-vue"
+import { cn } from "@/lib/utils"
+import DrawerOverlay from "./DrawerOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      data-slot="drawer-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+        'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
+        'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
+        'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
+        'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
+        props.class,
+      )"
+    >
+      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerDescription.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerDescription.vue
new file mode 100644
index 0000000000..77e69ba351
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerDescription } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerDescription
+    data-slot="drawer-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerFooter.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerFooter.vue
new file mode 100644
index 0000000000..34c2e1217e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="drawer-footer"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerHeader.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerHeader.vue
new file mode 100644
index 0000000000..f68aeb059e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="drawer-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerOverlay.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 0000000000..e7e4a05ab7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerOverlay } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerOverlay
+    data-slot="drawer-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerTitle.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerTitle.vue
new file mode 100644
index 0000000000..328fb0d21d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerTitle } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerTitle
+    data-slot="drawer-title"
+    v-bind="delegatedProps"
+    :class="cn('text-foreground font-semibold', props.class)"
+  >
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/DrawerTrigger.vue b/frontend/app/web-gold/src/components/ui/drawer/DrawerTrigger.vue
new file mode 100644
index 0000000000..04b5bf13b5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/DrawerTrigger.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { DrawerTriggerProps } from "vaul-vue"
+import { DrawerTrigger } from "vaul-vue"
+
+const props = defineProps<DrawerTriggerProps>()
+</script>
+
+<template>
+  <DrawerTrigger
+    data-slot="drawer-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DrawerTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/drawer/index.ts b/frontend/app/web-gold/src/components/ui/drawer/index.ts
new file mode 100644
index 0000000000..0d07820d6f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/drawer/index.ts
@@ -0,0 +1,9 @@
+export { default as Drawer } from "./Drawer.vue"
+export { default as DrawerClose } from "./DrawerClose.vue"
+export { default as DrawerContent } from "./DrawerContent.vue"
+export { default as DrawerDescription } from "./DrawerDescription.vue"
+export { default as DrawerFooter } from "./DrawerFooter.vue"
+export { default as DrawerHeader } from "./DrawerHeader.vue"
+export { default as DrawerOverlay } from "./DrawerOverlay.vue"
+export { default as DrawerTitle } from "./DrawerTitle.vue"
+export { default as DrawerTrigger } from "./DrawerTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenu.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000000..e1c9ee3043
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot
+    v-slot="slotProps"
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000000..1253078dcc
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class=" cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000000..7c43014137
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuGroup.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000000..da634ec099
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui"
+import { DropdownMenuGroup } from "reka-ui"
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup
+    data-slot="dropdown-menu-group"
+    v-bind="props"
+  >
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000000..f56cae3e73
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<DropdownMenuItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>(), {
+  variant: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000000..8bca83c434
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuLabel, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000000..fe82cadd73
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
+import {
+  DropdownMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000000..e03c40c5a8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000000..1b936c392d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSeparator,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000000..60be75cc9d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000000..7472e77f53
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
+import {
+  DropdownMenuSub,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuSub>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000000..d7c6b087df
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000000..0906491160
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import {
+  DropdownMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :data-inset="inset ? '' : undefined"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000000..75cd7472ce
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui"
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/dropdown-menu/index.ts b/frontend/app/web-gold/src/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000000..955fe3aa08
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue"
+
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
+export { DropdownMenuPortal } from "reka-ui"
diff --git a/frontend/app/web-gold/src/components/ui/empty/Empty.vue b/frontend/app/web-gold/src/components/ui/empty/Empty.vue
new file mode 100644
index 0000000000..2637b3c7bf
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/empty/Empty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty"
+    :class="cn(
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/empty/EmptyContent.vue b/frontend/app/web-gold/src/components/ui/empty/EmptyContent.vue
new file mode 100644
index 0000000000..d19ee0003a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/empty/EmptyContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-content"
+    :class="cn(
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/empty/EmptyDescription.vue b/frontend/app/web-gold/src/components/ui/empty/EmptyDescription.vue
new file mode 100644
index 0000000000..e4ed5fb712
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/empty/EmptyDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="empty-description"
+    :class="cn(
+      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/empty/EmptyHeader.vue b/frontend/app/web-gold/src/components/ui/empty/EmptyHeader.vue
new file mode 100644
index 0000000000..ac21d8c892
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/empty/EmptyHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-header"
+    :class="cn(
+      'flex max-w-sm flex-col items-center gap-2 text-center',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/empty/EmptyMedia.vue b/frontend/app/web-gold/src/components/ui/empty/EmptyMedia.vue
new file mode 100644
index 0000000000..c68397c0c7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/empty/EmptyMedia.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/empty/EmptyTitle.vue b/frontend/app/web-gold/src/components/ui/empty/EmptyTitle.vue
new file mode 100644
index 0000000000..90c950d29f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/empty/EmptyTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-title"
+    :class="cn('text-lg font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/empty/index.ts b/frontend/app/web-gold/src/components/ui/empty/index.ts
new file mode 100644
index 0000000000..ce0c489f23
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/empty/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Empty } from "./Empty.vue"
+export { default as EmptyContent } from "./EmptyContent.vue"
+export { default as EmptyDescription } from "./EmptyDescription.vue"
+export { default as EmptyHeader } from "./EmptyHeader.vue"
+export { default as EmptyMedia } from "./EmptyMedia.vue"
+export { default as EmptyTitle } from "./EmptyTitle.vue"
+
+export const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>
diff --git a/frontend/app/web-gold/src/components/ui/field/Field.vue b/frontend/app/web-gold/src/components/ui/field/Field.vue
new file mode 100644
index 0000000000..5519d3705b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/Field.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { FieldVariants } from "."
+import { cn } from "@/lib/utils"
+import { fieldVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  orientation?: FieldVariants["orientation"]
+}>()
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="field"
+    :data-orientation="orientation"
+    :class="cn(
+      fieldVariants({ orientation }),
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldContent.vue b/frontend/app/web-gold/src/components/ui/field/FieldContent.vue
new file mode 100644
index 0000000000..d9a23fd751
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="field-content"
+    :class="cn(
+      'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldDescription.vue b/frontend/app/web-gold/src/components/ui/field/FieldDescription.vue
new file mode 100644
index 0000000000..7240a837d6
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldDescription.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="field-description"
+    :class="cn(
+      'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+      'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldError.vue b/frontend/app/web-gold/src/components/ui/field/FieldError.vue
new file mode 100644
index 0000000000..8a0a63f027
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldError.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  errors?: Array<string | { message: string | undefined } | undefined>
+}>()
+
+const content = computed(() => {
+  if (!props.errors || props.errors.length === 0)
+    return null
+
+  const uniqueErrors = [
+    ...new Map(
+      props.errors
+        .filter(Boolean)
+        .map((error) => {
+          const message = typeof error === "string" ? error : error?.message
+          return [message, error]
+        }),
+    ).values(),
+  ]
+
+  if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+    return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message
+  }
+
+  return uniqueErrors.map(error => typeof error === "string" ? error : error?.message)
+})
+</script>
+
+<template>
+  <div
+    v-if="$slots.default || content"
+    role="alert"
+    data-slot="field-error"
+    :class="cn('text-destructive text-sm font-normal', props.class)"
+  >
+    <slot v-if="$slots.default" />
+
+    <template v-else-if="typeof content === 'string'">
+      {{ content }}
+    </template>
+
+    <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+      <li v-for="(error, index) in content" :key="index">
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldGroup.vue b/frontend/app/web-gold/src/components/ui/field/FieldGroup.vue
new file mode 100644
index 0000000000..834d8ced79
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="field-group"
+    :class="cn(
+      'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldLabel.vue b/frontend/app/web-gold/src/components/ui/field/FieldLabel.vue
new file mode 100644
index 0000000000..e2692ecd4c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldLabel.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Label
+    data-slot="field-label"
+    :class="cn(
+      'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+      'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+      props.class,
+    )"
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldLegend.vue b/frontend/app/web-gold/src/components/ui/field/FieldLegend.vue
new file mode 100644
index 0000000000..c620fed431
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldLegend.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: "legend" | "label"
+}>()
+</script>
+
+<template>
+  <legend
+    data-slot="field-legend"
+    :data-variant="variant"
+    :class="cn(
+      'mb-3 font-medium',
+      'data-[variant=legend]:text-base',
+      'data-[variant=label]:text-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </legend>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldSeparator.vue b/frontend/app/web-gold/src/components/ui/field/FieldSeparator.vue
new file mode 100644
index 0000000000..5bca4d50f7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldSeparator.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="field-separator"
+    :data-content="!!$slots.default"
+    :class="cn(
+      'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+      props.class,
+    )"
+  >
+    <Separator class="absolute inset-0 top-1/2" />
+    <span
+      v-if="$slots.default"
+      class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+      data-slot="field-separator-content"
+    >
+      <slot />
+    </span>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldSet.vue b/frontend/app/web-gold/src/components/ui/field/FieldSet.vue
new file mode 100644
index 0000000000..7be4dc9e77
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldSet.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <fieldset
+    data-slot="field-set"
+    :class="cn(
+      'flex flex-col gap-6',
+      'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+      props.class,
+    )"
+  >
+    <slot />
+  </fieldset>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/FieldTitle.vue b/frontend/app/web-gold/src/components/ui/field/FieldTitle.vue
new file mode 100644
index 0000000000..f564b8b8a0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/FieldTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="field-label"
+    :class="cn(
+      'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/field/index.ts b/frontend/app/web-gold/src/components/ui/field/index.ts
new file mode 100644
index 0000000000..162ba14de2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/field/index.ts
@@ -0,0 +1,39 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)
+
+export type FieldVariants = VariantProps<typeof fieldVariants>
+
+export { default as Field } from "./Field.vue"
+export { default as FieldContent } from "./FieldContent.vue"
+export { default as FieldDescription } from "./FieldDescription.vue"
+export { default as FieldError } from "./FieldError.vue"
+export { default as FieldGroup } from "./FieldGroup.vue"
+export { default as FieldLabel } from "./FieldLabel.vue"
+export { default as FieldLegend } from "./FieldLegend.vue"
+export { default as FieldSeparator } from "./FieldSeparator.vue"
+export { default as FieldSet } from "./FieldSet.vue"
+export { default as FieldTitle } from "./FieldTitle.vue"
diff --git a/frontend/app/web-gold/src/components/ui/form/FormControl.vue b/frontend/app/web-gold/src/components/ui/form/FormControl.vue
new file mode 100644
index 0000000000..b1bc4bfadb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/FormControl.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from "reka-ui"
+import { useFormField } from "./useFormField"
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/form/FormDescription.vue b/frontend/app/web-gold/src/components/ui/form/FormDescription.vue
new file mode 100644
index 0000000000..2d3a903dc4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/FormDescription.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/form/FormItem.vue b/frontend/app/web-gold/src/components/ui/form/FormItem.vue
new file mode 100644
index 0000000000..40cb994da8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/FormItem.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { useId } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    data-slot="form-item"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/form/FormLabel.vue b/frontend/app/web-gold/src/components/ui/form/FormLabel.vue
new file mode 100644
index 0000000000..d5475f7d4d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/FormLabel.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(
+      'data-[error=true]:text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/form/FormMessage.vue b/frontend/app/web-gold/src/components/ui/form/FormMessage.vue
new file mode 100644
index 0000000000..c80c482d7d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/FormMessage.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ErrorMessage } from "vee-validate"
+import { toValue } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('text-destructive text-sm', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/form/index.ts b/frontend/app/web-gold/src/components/ui/form/index.ts
new file mode 100644
index 0000000000..1eb05f11a3
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/index.ts
@@ -0,0 +1,7 @@
+export { default as FormControl } from "./FormControl.vue"
+export { default as FormDescription } from "./FormDescription.vue"
+export { default as FormItem } from "./FormItem.vue"
+export { default as FormLabel } from "./FormLabel.vue"
+export { default as FormMessage } from "./FormMessage.vue"
+export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+export { Form, Field as FormField, FieldArray as FormFieldArray } from "vee-validate"
diff --git a/frontend/app/web-gold/src/components/ui/form/injectionKeys.ts b/frontend/app/web-gold/src/components/ui/form/injectionKeys.ts
new file mode 100644
index 0000000000..42542a96f7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/injectionKeys.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>
diff --git a/frontend/app/web-gold/src/components/ui/form/useFormField.ts b/frontend/app/web-gold/src/components/ui/form/useFormField.ts
new file mode 100644
index 0000000000..62d86c268f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/form/useFormField.ts
@@ -0,0 +1,30 @@
+import { FieldContextKey } from "vee-validate"
+import { computed, inject } from "vue"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error("useFormField should be used within <FormField>")
+
+  const { name, errorMessage: error, meta } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: computed(() => meta.valid),
+    isDirty: computed(() => meta.dirty),
+    isTouched: computed(() => meta.touched),
+    error,
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
diff --git a/frontend/app/web-gold/src/components/ui/hover-card/HoverCard.vue b/frontend/app/web-gold/src/components/ui/hover-card/HoverCard.vue
new file mode 100644
index 0000000000..07d11e6058
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/hover-card/HoverCard.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui"
+import { HoverCardRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot
+    v-slot="slotProps"
+    data-slot="hover-card"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </HoverCardRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/hover-card/HoverCardContent.vue b/frontend/app/web-gold/src/components/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 0000000000..2a3c55336d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  HoverCardContent,
+  HoverCardPortal,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      data-slot="hover-card-content"
+      v-bind="{ ...$attrs, ...forwardedProps }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/hover-card/HoverCardTrigger.vue b/frontend/app/web-gold/src/components/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 0000000000..0a0900192f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from "reka-ui"
+import { HoverCardTrigger } from "reka-ui"
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger
+    data-slot="hover-card-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/hover-card/index.ts b/frontend/app/web-gold/src/components/ui/hover-card/index.ts
new file mode 100644
index 0000000000..49b2930d28
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.vue"
+export { default as HoverCardContent } from "./HoverCardContent.vue"
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/input-group/InputGroup.vue b/frontend/app/web-gold/src/components/ui/input-group/InputGroup.vue
new file mode 100644
index 0000000000..d32d69d4a7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-group/InputGroup.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="input-group"
+    role="group"
+    :class="cn(
+      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+      'h-9 min-w-0 has-[>textarea]:h-auto',
+
+      // Variants based on alignment.
+      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+      // Focus state.
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+      // Error state.
+      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-group/InputGroupAddon.vue b/frontend/app/web-gold/src/components/ui/input-group/InputGroupAddon.vue
new file mode 100644
index 0000000000..709f482a35
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-group/InputGroupAddon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { InputGroupVariants } from "."
+import { cn } from "@/lib/utils"
+import { inputGroupAddonVariants } from "."
+
+const props = withDefaults(defineProps<{
+  align?: InputGroupVariants["align"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  align: "inline-start",
+})
+
+function handleInputGroupAddonClick(e: MouseEvent) {
+  const currentTarget = e.currentTarget as HTMLElement | null
+  const target = e.target as HTMLElement | null
+  if (target && target.closest("button")) {
+    return
+  }
+  if (currentTarget && currentTarget?.parentElement) {
+    currentTarget.parentElement?.querySelector("input")?.focus()
+  }
+}
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="props.align"
+    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
+    @click="handleInputGroupAddonClick"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-group/InputGroupButton.vue b/frontend/app/web-gold/src/components/ui/input-group/InputGroupButton.vue
new file mode 100644
index 0000000000..26dcdb8d12
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-group/InputGroupButton.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { InputGroupButtonVariants } from "."
+import type { ButtonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { inputGroupButtonVariants } from "."
+
+interface InputGroupButtonProps {
+  variant?: ButtonVariants["variant"]
+  size?: InputGroupButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<InputGroupButtonProps>(), {
+  size: "xs",
+  variant: "ghost",
+})
+</script>
+
+<template>
+  <Button
+    :data-size="props.size"
+    :variant="props.variant"
+    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </Button>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-group/InputGroupInput.vue b/frontend/app/web-gold/src/components/ui/input-group/InputGroupInput.vue
new file mode 100644
index 0000000000..5fcff43bb5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-group/InputGroupInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Input
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-group/InputGroupText.vue b/frontend/app/web-gold/src/components/ui/input-group/InputGroupText.vue
new file mode 100644
index 0000000000..e317337966
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-group/InputGroupText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-group/InputGroupTextarea.vue b/frontend/app/web-gold/src/components/ui/input-group/InputGroupTextarea.vue
new file mode 100644
index 0000000000..596beba1c5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-group/InputGroupTextarea.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Textarea } from "@/components/ui/textarea"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Textarea
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-group/index.ts b/frontend/app/web-gold/src/components/ui/input-group/index.ts
new file mode 100644
index 0000000000..e70a2adf34
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-group/index.ts
@@ -0,0 +1,51 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as InputGroup } from "./InputGroup.vue"
+export { default as InputGroupAddon } from "./InputGroupAddon.vue"
+export { default as InputGroupButton } from "./InputGroupButton.vue"
+export { default as InputGroupInput } from "./InputGroupInput.vue"
+export { default as InputGroupText } from "./InputGroupText.vue"
+export { default as InputGroupTextarea } from "./InputGroupTextarea.vue"
+
+export const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+)
+
+export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>
+
+export const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        "xs": "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        "sm": "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+)
+
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>
diff --git a/frontend/app/web-gold/src/components/ui/input-otp/InputOTP.vue b/frontend/app/web-gold/src/components/ui/input-otp/InputOTP.vue
new file mode 100644
index 0000000000..f34b73481d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-otp/InputOTP.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardPropsEmits } from "reka-ui"
+import { OTPInput } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
+    data-slot="input-otp"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot v-bind="slotProps" />
+  </OTPInput>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-otp/InputOTPGroup.vue b/frontend/app/web-gold/src/components/ui/input-otp/InputOTPGroup.vue
new file mode 100644
index 0000000000..1dea2abab4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-otp/InputOTPGroup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-group"
+    v-bind="forwarded"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-otp/InputOTPSeparator.vue b/frontend/app/web-gold/src/components/ui/input-otp/InputOTPSeparator.vue
new file mode 100644
index 0000000000..7675e2558e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-otp/InputOTPSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { MinusIcon } from "lucide-vue-next"
+import { useForwardProps } from "reka-ui"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-separator"
+    role="separator"
+    v-bind="forwarded"
+  >
+    <slot>
+      <MinusIcon />
+    </slot>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-otp/InputOTPSlot.vue b/frontend/app/web-gold/src/components/ui/input-otp/InputOTPSlot.vue
new file mode 100644
index 0000000000..a165799679
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-otp/InputOTPSlot.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { computed } from "vue"
+import { useVueOTPContext } from "vue-input-otp"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+
+const context = useVueOTPContext()
+
+const slot = computed(() => context?.value.slots[props.index])
+</script>
+
+<template>
+  <div
+    v-bind="forwarded"
+    data-slot="input-otp-slot"
+    :data-active="slot?.isActive"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
+  >
+    {{ slot?.char }}
+    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+    </div>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input-otp/index.ts b/frontend/app/web-gold/src/components/ui/input-otp/index.ts
new file mode 100644
index 0000000000..d97448a569
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input-otp/index.ts
@@ -0,0 +1,4 @@
+export { default as InputOTP } from "./InputOTP.vue"
+export { default as InputOTPGroup } from "./InputOTPGroup.vue"
+export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
+export { default as InputOTPSlot } from "./InputOTPSlot.vue"
diff --git a/frontend/app/web-gold/src/components/ui/input/Input.vue b/frontend/app/web-gold/src/components/ui/input/Input.vue
new file mode 100644
index 0000000000..e5135c1436
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input/Input.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes["class"]
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class,
+    )"
+  >
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/input/index.ts b/frontend/app/web-gold/src/components/ui/input/index.ts
new file mode 100644
index 0000000000..9976b86f52
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue"
diff --git a/frontend/app/web-gold/src/components/ui/item/Item.vue b/frontend/app/web-gold/src/components/ui/item/Item.vue
new file mode 100644
index 0000000000..0cec259d50
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/Item.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ItemVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { itemVariants } from "."
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ItemVariants["variant"]
+  size?: ItemVariants["size"]
+}>(), {
+  as: "div",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="item"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(itemVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemActions.vue b/frontend/app/web-gold/src/components/ui/item/ItemActions.vue
new file mode 100644
index 0000000000..b525712933
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemActions.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-actions"
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemContent.vue b/frontend/app/web-gold/src/components/ui/item/ItemContent.vue
new file mode 100644
index 0000000000..212d64f835
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-content"
+    :class="cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemDescription.vue b/frontend/app/web-gold/src/components/ui/item/ItemDescription.vue
new file mode 100644
index 0000000000..278e6b84d5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="item-description"
+    :class="cn(
+      'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemFooter.vue b/frontend/app/web-gold/src/components/ui/item/ItemFooter.vue
new file mode 100644
index 0000000000..fd57ccf9c6
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-footer"
+    :class="cn('flex basis-full items-center justify-between gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemGroup.vue b/frontend/app/web-gold/src/components/ui/item/ItemGroup.vue
new file mode 100644
index 0000000000..121a0c27b8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    role="list"
+    data-slot="item-group"
+    :class="cn('group/item-group flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemHeader.vue b/frontend/app/web-gold/src/components/ui/item/ItemHeader.vue
new file mode 100644
index 0000000000..c9fb17acf5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-header"
+    :class="cn('flex basis-full items-center justify-between gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemMedia.vue b/frontend/app/web-gold/src/components/ui/item/ItemMedia.vue
new file mode 100644
index 0000000000..db229f31e4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemMedia.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { ItemMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { itemMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: ItemMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-media"
+    :data-variant="props.variant"
+    :class="cn(itemMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemSeparator.vue b/frontend/app/web-gold/src/components/ui/item/ItemSeparator.vue
new file mode 100644
index 0000000000..949b5a036b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>()
+</script>
+
+<template>
+  <Separator
+    data-slot="item-separator"
+    orientation="horizontal"
+    :class="cn('my-0', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/ItemTitle.vue b/frontend/app/web-gold/src/components/ui/item/ItemTitle.vue
new file mode 100644
index 0000000000..81c0827cd4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/ItemTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-title"
+    :class="cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/item/index.ts b/frontend/app/web-gold/src/components/ui/item/index.ts
new file mode 100644
index 0000000000..948421d808
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/item/index.ts
@@ -0,0 +1,54 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Item } from "./Item.vue"
+export { default as ItemActions } from "./ItemActions.vue"
+export { default as ItemContent } from "./ItemContent.vue"
+export { default as ItemDescription } from "./ItemDescription.vue"
+export { default as ItemFooter } from "./ItemFooter.vue"
+export { default as ItemGroup } from "./ItemGroup.vue"
+export { default as ItemHeader } from "./ItemHeader.vue"
+export { default as ItemMedia } from "./ItemMedia.vue"
+export { default as ItemSeparator } from "./ItemSeparator.vue"
+export { default as ItemTitle } from "./ItemTitle.vue"
+
+export const itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type ItemVariants = VariantProps<typeof itemVariants>
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>
diff --git a/frontend/app/web-gold/src/components/ui/kbd/Kbd.vue b/frontend/app/web-gold/src/components/ui/kbd/Kbd.vue
new file mode 100644
index 0000000000..e71b49492b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/kbd/Kbd.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    :class="cn(
+      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+      '[&_svg:not([class*=\'size-\'])]:size-3',
+      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+      props.class,
+    )"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/kbd/KbdGroup.vue b/frontend/app/web-gold/src/components/ui/kbd/KbdGroup.vue
new file mode 100644
index 0000000000..e0cd862247
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/kbd/KbdGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <kbd
+    data-slot="kbd-group"
+    :class="cn('inline-flex items-center gap-1', props.class)"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/kbd/index.ts b/frontend/app/web-gold/src/components/ui/kbd/index.ts
new file mode 100644
index 0000000000..b613b0cc9c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/kbd/index.ts
@@ -0,0 +1,2 @@
+export { default as Kbd } from "./Kbd.vue"
+export { default as KbdGroup } from "./KbdGroup.vue"
diff --git a/frontend/app/web-gold/src/components/ui/label/Label.vue b/frontend/app/web-gold/src/components/ui/label/Label.vue
new file mode 100644
index 0000000000..ee63970244
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/label/Label.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Label } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/label/index.ts b/frontend/app/web-gold/src/components/ui/label/index.ts
new file mode 100644
index 0000000000..036e35c34d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue"
diff --git a/frontend/app/web-gold/src/components/ui/menubar/Menubar.vue b/frontend/app/web-gold/src/components/ui/menubar/Menubar.vue
new file mode 100644
index 0000000000..fb2032ac10
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/Menubar.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRoot
+    v-slot="slotProps"
+    data-slot="menubar"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        props.class,
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+  </MenubarRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarCheckboxItem.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarCheckboxItem.vue
new file mode 100644
index 0000000000..b2caa909b0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarCheckboxItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  MenubarCheckboxItem,
+  MenubarItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    data-slot="menubar-checkbox-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarContent.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarContent.vue
new file mode 100644
index 0000000000..fa116be553
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarContent,
+  MenubarPortal,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "start",
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      data-slot="menubar-content"
+      v-bind="{ ...$attrs, ...forwardedProps }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarGroup.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarGroup.vue
new file mode 100644
index 0000000000..928e5032c1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarGroupProps } from "reka-ui"
+import { MenubarGroup } from "reka-ui"
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup
+    data-slot="menubar-group"
+    v-bind="props"
+  >
+    <slot />
+  </MenubarGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarItem.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarItem.vue
new file mode 100644
index 0000000000..2f73805afa
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarItem
+    data-slot="menubar-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarLabel.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarLabel.vue
new file mode 100644
index 0000000000..2d28e3b5d4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarLabel.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MenubarLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const delegatedProps = reactiveOmit(props, "class", "inset")
+</script>
+
+<template>
+  <MenubarLabel
+    :data-inset="inset ? '' : undefined"
+    v-bind="delegatedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </MenubarLabel>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarMenu.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarMenu.vue
new file mode 100644
index 0000000000..8a6c27ed48
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from "reka-ui"
+import { MenubarMenu } from "reka-ui"
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu
+    data-slot="menubar-menu"
+    v-bind="props"
+  >
+    <slot />
+  </MenubarMenu>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarRadioGroup.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarRadioGroup.vue
new file mode 100644
index 0000000000..9fc3a0f1fb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarRadioGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "reka-ui"
+import {
+  MenubarRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<MenubarRadioGroupProps>()
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup
+    data-slot="menubar-radio-group"
+    v-bind="forwarded"
+  >
+    <slot />
+  </MenubarRadioGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarRadioItem.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarRadioItem.vue
new file mode 100644
index 0000000000..c2543cb083
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarRadioItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRadioItem
+    data-slot="menubar-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarSeparator.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarSeparator.vue
new file mode 100644
index 0000000000..f65b42394c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MenubarSeparator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSeparator
+    data-slot="menubar-separator"
+    :class=" cn('bg-border -mx-1 my-1 h-px', props.class)"
+    v-bind="forwardedProps"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarShortcut.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarShortcut.vue
new file mode 100644
index 0000000000..ec8dc917a1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="menubar-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarSub.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarSub.vue
new file mode 100644
index 0000000000..c99cf4200a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarSub.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from "reka-ui"
+import { MenubarSub, useForwardPropsEmits } from "reka-ui"
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub
+    v-slot="slotProps"
+    data-slot="menubar-sub"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </MenubarSub>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarSubContent.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarSubContent.vue
new file mode 100644
index 0000000000..f4831d3625
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarSubContent.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarPortal,
+  MenubarSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      data-slot="menubar-sub-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarSubTrigger.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarSubTrigger.vue
new file mode 100644
index 0000000000..1d87b140ae
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarSubTrigger.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { MenubarSubTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSubTrigger
+    data-slot="menubar-sub-trigger"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto size-4" />
+  </MenubarSubTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/MenubarTrigger.vue b/frontend/app/web-gold/src/components/ui/menubar/MenubarTrigger.vue
new file mode 100644
index 0000000000..47fbaad2b0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/MenubarTrigger.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MenubarTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarTrigger
+    data-slot="menubar-trigger"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/menubar/index.ts b/frontend/app/web-gold/src/components/ui/menubar/index.ts
new file mode 100644
index 0000000000..bebbb780ce
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/menubar/index.ts
@@ -0,0 +1,15 @@
+export { default as Menubar } from "./Menubar.vue"
+export { default as MenubarCheckboxItem } from "./MenubarCheckboxItem.vue"
+export { default as MenubarContent } from "./MenubarContent.vue"
+export { default as MenubarGroup } from "./MenubarGroup.vue"
+export { default as MenubarItem } from "./MenubarItem.vue"
+export { default as MenubarLabel } from "./MenubarLabel.vue"
+export { default as MenubarMenu } from "./MenubarMenu.vue"
+export { default as MenubarRadioGroup } from "./MenubarRadioGroup.vue"
+export { default as MenubarRadioItem } from "./MenubarRadioItem.vue"
+export { default as MenubarSeparator } from "./MenubarSeparator.vue"
+export { default as MenubarShortcut } from "./MenubarShortcut.vue"
+export { default as MenubarSub } from "./MenubarSub.vue"
+export { default as MenubarSubContent } from "./MenubarSubContent.vue"
+export { default as MenubarSubTrigger } from "./MenubarSubTrigger.vue"
+export { default as MenubarTrigger } from "./MenubarTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/native-select/NativeSelect.vue b/frontend/app/web-gold/src/components/ui/native-select/NativeSelect.vue
new file mode 100644
index 0000000000..31716767a3
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/native-select/NativeSelect.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useVModel } from "@vueuse/core"
+import { ChevronDownIcon } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue
+}>()
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="cn(
+        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )"
+    >
+      <slot />
+    </select>
+    <ChevronDownIcon
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/native-select/NativeSelectOptGroup.vue b/frontend/app/web-gold/src/components/ui/native-select/NativeSelectOptGroup.vue
new file mode 100644
index 0000000000..169558cb80
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/native-select/NativeSelectOptGroup.vue
@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </optgroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/native-select/NativeSelectOption.vue b/frontend/app/web-gold/src/components/ui/native-select/NativeSelectOption.vue
new file mode 100644
index 0000000000..2f678fb610
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/native-select/NativeSelectOption.vue
@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </option>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/native-select/index.ts b/frontend/app/web-gold/src/components/ui/native-select/index.ts
new file mode 100644
index 0000000000..04e92c7ee2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/native-select/index.ts
@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./NativeSelect.vue"
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
+export { default as NativeSelectOption } from "./NativeSelectOption.vue"
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenu.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 0000000000..6042a77d43
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import NavigationMenuViewport from "./NavigationMenuViewport.vue"
+
+const props = withDefaults(defineProps<NavigationMenuRootProps & {
+  class?: HTMLAttributes["class"]
+  viewport?: boolean
+}>(), {
+  viewport: true,
+})
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "viewport")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-slot="slotProps"
+    data-slot="navigation-menu"
+    :data-viewport="viewport"
+    v-bind="forwarded"
+    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot v-bind="slotProps" />
+    <NavigationMenuViewport v-if="viewport" />
+  </NavigationMenuRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuContent.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 0000000000..395dc2dfa2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    data-slot="navigation-menu-content"
+    v-bind="forwarded"
+    :class="cn(
+      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+      'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuIndicator.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 0000000000..2558371abe
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    data-slot="navigation-menu-indicator"
+    v-bind="forwardedProps"
+    :class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
+  >
+    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+  </NavigationMenuIndicator>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuItem.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 0000000000..1a8595b8db
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <NavigationMenuItem
+    data-slot="navigation-menu-item"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuLink.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 0000000000..6620c05372
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuLink,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuLink
+    data-slot="navigation-menu-link"
+    v-bind="forwarded"
+    :class="cn('data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuList.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 0000000000..a702d7063c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuList, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    data-slot="navigation-menu-list"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuTrigger.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 0000000000..3969701009
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import {
+  NavigationMenuTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { navigationMenuTriggerStyle } from "."
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuViewport.vue b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 0000000000..74edf86764
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuViewport,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
+    <NavigationMenuViewport
+      data-slot="navigation-menu-viewport"
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/navigation-menu/index.ts b/frontend/app/web-gold/src/components/ui/navigation-menu/index.ts
new file mode 100644
index 0000000000..90055919d5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/navigation-menu/index.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+export { default as NavigationMenu } from "./NavigationMenu.vue"
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
+export { default as NavigationMenuList } from "./NavigationMenuList.vue"
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+)
diff --git a/frontend/app/web-gold/src/components/ui/number-field/NumberField.vue b/frontend/app/web-gold/src/components/ui/number-field/NumberField.vue
new file mode 100644
index 0000000000..e9f2f220d5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/number-field/NumberField.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NumberFieldRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NumberFieldRoot v-slot="slotProps" v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+    <slot v-bind="slotProps" />
+  </NumberFieldRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/number-field/NumberFieldContent.vue b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldContent.vue
new file mode 100644
index 0000000000..2a2be5898c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/number-field/NumberFieldDecrement.vue b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldDecrement.vue
new file mode 100644
index 0000000000..69b49c4870
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Minus } from "lucide-vue-next"
+import { NumberFieldDecrement, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/number-field/NumberFieldIncrement.vue b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldIncrement.vue
new file mode 100644
index 0000000000..b755a4f1c2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Plus } from "lucide-vue-next"
+import { NumberFieldIncrement, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/number-field/NumberFieldInput.vue b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldInput.vue
new file mode 100644
index 0000000000..ea571b1f35
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/number-field/NumberFieldInput.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { NumberFieldInput } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <NumberFieldInput
+    data-slot="input"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/number-field/index.ts b/frontend/app/web-gold/src/components/ui/number-field/index.ts
new file mode 100644
index 0000000000..97d0eecb27
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/number-field/index.ts
@@ -0,0 +1,5 @@
+export { default as NumberField } from "./NumberField.vue"
+export { default as NumberFieldContent } from "./NumberFieldContent.vue"
+export { default as NumberFieldDecrement } from "./NumberFieldDecrement.vue"
+export { default as NumberFieldIncrement } from "./NumberFieldIncrement.vue"
+export { default as NumberFieldInput } from "./NumberFieldInput.vue"
diff --git a/frontend/app/web-gold/src/components/ui/pagination/Pagination.vue b/frontend/app/web-gold/src/components/ui/pagination/Pagination.vue
new file mode 100644
index 0000000000..d410b24288
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/Pagination.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationRootProps & {
+  class?: HTMLAttributes["class"]
+}>()
+const emits = defineEmits<PaginationRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PaginationRoot
+    v-slot="slotProps"
+    data-slot="pagination"
+    v-bind="forwarded"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/PaginationContent.vue b/frontend/app/web-gold/src/components/ui/pagination/PaginationContent.vue
new file mode 100644
index 0000000000..5150b4969a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/PaginationContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { PaginationListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationList>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/PaginationEllipsis.vue b/frontend/app/web-gold/src/components/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 0000000000..cc9e002edb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MoreHorizontal } from "lucide-vue-next"
+import { PaginationEllipsis } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationEllipsis
+    data-slot="pagination-ellipsis"
+    v-bind="delegatedProps"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+      <span class="sr-only">More pages</span>
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/PaginationFirst.vue b/frontend/app/web-gold/src/components/ui/pagination/PaginationFirst.vue
new file mode 100644
index 0000000000..e37e706cf9
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "@/components/ui/button"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeftIcon } from "lucide-vue-next"
+import { PaginationFirst, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = withDefaults(defineProps<PaginationFirstProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationFirst
+    data-slot="pagination-first"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">First</span>
+    </slot>
+  </PaginationFirst>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/PaginationItem.vue b/frontend/app/web-gold/src/components/ui/pagination/PaginationItem.vue
new file mode 100644
index 0000000000..1b52e4f774
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/PaginationItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationListItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "@/components/ui/button"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationListItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = withDefaults(defineProps<PaginationListItemProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+}>(), {
+  size: "icon",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
+</script>
+
+<template>
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      props.class)"
+  >
+    <slot />
+  </PaginationListItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/PaginationLast.vue b/frontend/app/web-gold/src/components/ui/pagination/PaginationLast.vue
new file mode 100644
index 0000000000..c371d66e1b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/PaginationLast.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "@/components/ui/button"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRightIcon } from "lucide-vue-next"
+import { PaginationLast, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = withDefaults(defineProps<PaginationLastProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationLast
+    data-slot="pagination-last"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Last</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationLast>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/PaginationNext.vue b/frontend/app/web-gold/src/components/ui/pagination/PaginationNext.vue
new file mode 100644
index 0000000000..ede69213ba
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/PaginationNext.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "@/components/ui/button"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRightIcon } from "lucide-vue-next"
+import { PaginationNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = withDefaults(defineProps<PaginationNextProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationNext
+    data-slot="pagination-next"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationNext>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/PaginationPrevious.vue b/frontend/app/web-gold/src/components/ui/pagination/PaginationPrevious.vue
new file mode 100644
index 0000000000..ed91eae7c8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/PaginationPrevious.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "@/components/ui/button"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeftIcon } from "lucide-vue-next"
+import { PaginationPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = withDefaults(defineProps<PaginationPrevProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationPrev
+    data-slot="pagination-previous"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">Previous</span>
+    </slot>
+  </PaginationPrev>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pagination/index.ts b/frontend/app/web-gold/src/components/ui/pagination/index.ts
new file mode 100644
index 0000000000..51ae7fdd05
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pagination/index.ts
@@ -0,0 +1,8 @@
+export { default as Pagination } from "./Pagination.vue"
+export { default as PaginationContent } from "./PaginationContent.vue"
+export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
+export { default as PaginationFirst } from "./PaginationFirst.vue"
+export { default as PaginationItem } from "./PaginationItem.vue"
+export { default as PaginationLast } from "./PaginationLast.vue"
+export { default as PaginationNext } from "./PaginationNext.vue"
+export { default as PaginationPrevious } from "./PaginationPrevious.vue"
diff --git a/frontend/app/web-gold/src/components/ui/pin-input/PinInput.vue b/frontend/app/web-gold/src/components/ui/pin-input/PinInput.vue
new file mode 100644
index 0000000000..af25ab16d0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pin-input/PinInput.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts" generic="Type extends 'text' | 'number' = 'text'">
+import type { PinInputRootEmits, PinInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PinInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PinInputRootProps<Type> & { class?: HTMLAttributes["class"] }>(), {
+  otp: true,
+})
+const emits = defineEmits<PinInputRootEmits<Type>>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot
+    :otp="props.otp"
+    data-slot="pin-input"
+    v-bind="forwarded" :class="cn('flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed', props.class)"
+  >
+    <slot />
+  </PinInputRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pin-input/PinInputGroup.vue b/frontend/app/web-gold/src/components/ui/pin-input/PinInputGroup.vue
new file mode 100644
index 0000000000..f5aff443be
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pin-input/PinInputGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-group"
+    v-bind="forwardedProps"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pin-input/PinInputSeparator.vue b/frontend/app/web-gold/src/components/ui/pin-input/PinInputSeparator.vue
new file mode 100644
index 0000000000..1d46418f5d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pin-input/PinInputSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import { Minus } from "lucide-vue-next"
+import { Primitive, useForwardProps } from "reka-ui"
+
+const props = defineProps<PrimitiveProps>()
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-separator"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Minus />
+    </slot>
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pin-input/PinInputSlot.vue b/frontend/app/web-gold/src/components/ui/pin-input/PinInputSlot.vue
new file mode 100644
index 0000000000..c9a3c954e1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pin-input/PinInputSlot.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PinInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput
+    data-slot="pin-input-slot"
+    v-bind="forwardedProps"
+    :class="cn('border-input focus:border-ring focus:ring-ring/50 focus:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:focus:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus:aria-invalid:border-destructive relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none text-center first:rounded-l-md first:border-l last:rounded-r-md focus:z-10 focus:ring-[3px]', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/pin-input/index.ts b/frontend/app/web-gold/src/components/ui/pin-input/index.ts
new file mode 100644
index 0000000000..74faa6c9d7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/pin-input/index.ts
@@ -0,0 +1,4 @@
+export { default as PinInput } from "./PinInput.vue"
+export { default as PinInputGroup } from "./PinInputGroup.vue"
+export { default as PinInputSeparator } from "./PinInputSeparator.vue"
+export { default as PinInputSlot } from "./PinInputSlot.vue"
diff --git a/frontend/app/web-gold/src/components/ui/popover/Popover.vue b/frontend/app/web-gold/src/components/ui/popover/Popover.vue
new file mode 100644
index 0000000000..4efdb98a0e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/popover/Popover.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/popover/PopoverAnchor.vue b/frontend/app/web-gold/src/components/ui/popover/PopoverAnchor.vue
new file mode 100644
index 0000000000..49e01dbc56
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/popover/PopoverContent.vue b/frontend/app/web-gold/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000000..cf1e55c501
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/popover/PopoverTrigger.vue b/frontend/app/web-gold/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000000..fd3b4974da
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/popover/index.ts b/frontend/app/web-gold/src/components/ui/popover/index.ts
new file mode 100644
index 0000000000..66edf89f6b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/progress/Progress.vue b/frontend/app/web-gold/src/components/ui/progress/Progress.vue
new file mode 100644
index 0000000000..5532af7a80
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/progress/Progress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/progress/index.ts b/frontend/app/web-gold/src/components/ui/progress/index.ts
new file mode 100644
index 0000000000..8598b9697c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"
diff --git a/frontend/app/web-gold/src/components/ui/radio-group/RadioGroup.vue b/frontend/app/web-gold/src/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 0000000000..54045c4213
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-slot="slotProps"
+    data-slot="radio-group"
+    :class="cn('grid gap-3', props.class)"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </RadioGroupRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/radio-group/RadioGroupItem.vue b/frontend/app/web-gold/src/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000000..2488c9dd89
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CircleIcon } from "lucide-vue-next"
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <slot>
+        <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/radio-group/index.ts b/frontend/app/web-gold/src/components/ui/radio-group/index.ts
new file mode 100644
index 0000000000..7cb0e3b10b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.vue"
+export { default as RadioGroupItem } from "./RadioGroupItem.vue"
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendar.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendar.vue
new file mode 100644
index 0000000000..178af4afd5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendar.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from "."
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    data-slot="range-calendar"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarHeading />
+
+      <div class="flex items-center gap-1">
+        <RangeCalendarPrevButton />
+        <RangeCalendarNextButton />
+      </div>
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarCell.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarCell.vue
new file mode 100644
index 0000000000..b459679d9a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    data-slot="range-calendar-cell"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue
new file mode 100644
index 0000000000..b3e90d76d9
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "button",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    data-slot="range-calendar-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selection Start
+      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+      // Selection End
+      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGrid.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGrid.vue
new file mode 100644
index 0000000000..f541c92340
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGrid.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    data-slot="range-calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridBody.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridBody.vue
new file mode 100644
index 0000000000..015f7afe01
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridBody.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridBodyProps } from "reka-ui"
+import { RangeCalendarGridBody } from "reka-ui"
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody
+    data-slot="range-calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridBody>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridHead.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridHead.vue
new file mode 100644
index 0000000000..cad9834969
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridHead.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridHeadProps } from "reka-ui"
+import { RangeCalendarGridHead } from "reka-ui"
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead
+    data-slot="range-calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridHead>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridRow.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridRow.vue
new file mode 100644
index 0000000000..1f03afdef2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarGridRow.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow
+    data-slot="range-calendar-grid-row"
+    :class="cn('flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGridRow>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeadCell.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeadCell.vue
new file mode 100644
index 0000000000..a83e412c5c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell
+    data-slot="range-calendar-head-cell"
+    :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeadCell>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeader.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeader.vue
new file mode 100644
index 0000000000..aac33fec89
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader
+    data-slot="range-calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeader>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeading.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeading.vue
new file mode 100644
index 0000000000..eeadd66d9e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarHeading.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="range-calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarNextButton.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarNextButton.vue
new file mode 100644
index 0000000000..6aae93f56f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { RangeCalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { RangeCalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    data-slot="range-calendar-next-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'absolute right-1',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </RangeCalendarNext>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarPrevButton.vue b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarPrevButton.vue
new file mode 100644
index 0000000000..047d3e46cc
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { RangeCalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { RangeCalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    data-slot="range-calendar-prev-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'absolute left-1',
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </RangeCalendarPrev>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/range-calendar/index.ts b/frontend/app/web-gold/src/components/ui/range-calendar/index.ts
new file mode 100644
index 0000000000..34d53610b8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/range-calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from "./RangeCalendar.vue"
+export { default as RangeCalendarCell } from "./RangeCalendarCell.vue"
+export { default as RangeCalendarCellTrigger } from "./RangeCalendarCellTrigger.vue"
+export { default as RangeCalendarGrid } from "./RangeCalendarGrid.vue"
+export { default as RangeCalendarGridBody } from "./RangeCalendarGridBody.vue"
+export { default as RangeCalendarGridHead } from "./RangeCalendarGridHead.vue"
+export { default as RangeCalendarGridRow } from "./RangeCalendarGridRow.vue"
+export { default as RangeCalendarHeadCell } from "./RangeCalendarHeadCell.vue"
+export { default as RangeCalendarHeader } from "./RangeCalendarHeader.vue"
+export { default as RangeCalendarHeading } from "./RangeCalendarHeading.vue"
+export { default as RangeCalendarNextButton } from "./RangeCalendarNextButton.vue"
+export { default as RangeCalendarPrevButton } from "./RangeCalendarPrevButton.vue"
diff --git a/frontend/app/web-gold/src/components/ui/resizable/ResizableHandle.vue b/frontend/app/web-gold/src/components/ui/resizable/ResizableHandle.vue
new file mode 100644
index 0000000000..6848165ecb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { GripVertical } from "lucide-vue-next"
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "withHandle")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle
+    data-slot="resizable-handle"
+    v-bind="forwarded"
+    :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
+  >
+    <template v-if="props.withHandle">
+      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+        <slot>
+          <GripVertical class="size-2.5" />
+        </slot>
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/resizable/ResizablePanel.vue b/frontend/app/web-gold/src/components/ui/resizable/ResizablePanel.vue
new file mode 100644
index 0000000000..e52e1ecb07
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/resizable/ResizablePanel.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui"
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SplitterPanelProps>()
+const emits = defineEmits<SplitterPanelEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+const { forwardRef } = useForwardExpose()
+</script>
+
+<template>
+  <SplitterPanel
+    :ref="forwardRef"
+    v-slot="slotProps"
+    data-slot="resizable-panel"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterPanel>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/resizable/ResizablePanelGroup.vue b/frontend/app/web-gold/src/components/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 0000000000..dd55b50c77
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup
+    v-slot="slotProps"
+    data-slot="resizable-panel-group"
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/resizable/index.ts b/frontend/app/web-gold/src/components/ui/resizable/index.ts
new file mode 100644
index 0000000000..89e5d7706a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from "./ResizableHandle.vue"
+export { default as ResizablePanel } from "./ResizablePanel.vue"
+export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue"
diff --git a/frontend/app/web-gold/src/components/ui/scroll-area/ScrollArea.vue b/frontend/app/web-gold/src/components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000000..6112caad37
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import ScrollBar from "./ScrollBar.vue"
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/scroll-area/ScrollBar.vue b/frontend/app/web-gold/src/components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000000..a0b6f9b7b9
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none p-px transition-colors select-none',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent',
+         props.class)"
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/scroll-area/index.ts b/frontend/app/web-gold/src/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000000..c416759cbb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue"
+export { default as ScrollBar } from "./ScrollBar.vue"
diff --git a/frontend/app/web-gold/src/components/ui/select/Select.vue b/frontend/app/web-gold/src/components/ui/select/Select.vue
new file mode 100644
index 0000000000..c94bbe888d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/Select.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from "reka-ui"
+import { SelectRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    v-slot="slotProps"
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SelectRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectContent.vue b/frontend/app/web-gold/src/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000000..adf04ec81f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectContent.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { SelectScrollDownButton, SelectScrollUpButton } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    position: "popper",
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectGroup.vue b/frontend/app/web-gold/src/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000000..e981c6c504
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from "reka-ui"
+import { SelectGroup } from "reka-ui"
+
+const props = defineProps<SelectGroupProps>()
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="props"
+  >
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectItem.vue b/frontend/app/web-gold/src/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000000..937176457c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { SelectItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectItemText.vue b/frontend/app/web-gold/src/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000000..b6700b17b5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectItemText.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from "reka-ui"
+import { SelectItemText } from "reka-ui"
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText
+    data-slot="select-item-text"
+    v-bind="props"
+  >
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectLabel.vue b/frontend/app/web-gold/src/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000000..5b6650cb03
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectLabel.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { SelectLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectScrollDownButton.vue b/frontend/app/web-gold/src/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000000..7dc7670b32
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectScrollDownButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronDown class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectScrollUpButton.vue b/frontend/app/web-gold/src/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000000..07fe87eab2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronUp } from "lucide-vue-next"
+import { SelectScrollUpButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronUp class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectSeparator.vue b/frontend/app/web-gold/src/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000000..4b5c88577a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectSeparator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectTrigger.vue b/frontend/app/web-gold/src/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000000..667908b6d8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  { size: "default" },
+)
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/SelectValue.vue b/frontend/app/web-gold/src/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000000..d5ce58b558
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/SelectValue.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectValueProps } from "reka-ui"
+import { SelectValue } from "reka-ui"
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/select/index.ts b/frontend/app/web-gold/src/components/ui/select/index.ts
new file mode 100644
index 0000000000..96eae60cfe
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from "./Select.vue"
+export { default as SelectContent } from "./SelectContent.vue"
+export { default as SelectGroup } from "./SelectGroup.vue"
+export { default as SelectItem } from "./SelectItem.vue"
+export { default as SelectItemText } from "./SelectItemText.vue"
+export { default as SelectLabel } from "./SelectLabel.vue"
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
+export { default as SelectSeparator } from "./SelectSeparator.vue"
+export { default as SelectTrigger } from "./SelectTrigger.vue"
+export { default as SelectValue } from "./SelectValue.vue"
diff --git a/frontend/app/web-gold/src/components/ui/separator/Separator.vue b/frontend/app/web-gold/src/components/ui/separator/Separator.vue
new file mode 100644
index 0000000000..78d60eca12
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/separator/Separator.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/separator/index.ts b/frontend/app/web-gold/src/components/ui/separator/index.ts
new file mode 100644
index 0000000000..4407287303
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue"
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/Sidebar.vue b/frontend/app/web-gold/src/components/ui/sidebar/Sidebar.vue
new file mode 100644
index 0000000000..9035cd4e87
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/Sidebar.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { SidebarProps } from "."
+import { cn } from "@/lib/utils"
+import { Sheet, SheetContent } from "@/components/ui/sheet"
+import SheetDescription from "@/components/ui/sheet/SheetDescription.vue"
+import SheetHeader from "@/components/ui/sheet/SheetHeader.vue"
+import SheetTitle from "@/components/ui/sheet/SheetTitle.vue"
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  side: "left",
+  variant: "sidebar",
+  collapsible: "offcanvas",
+})
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )"
+    />
+    <div
+      :class="cn(
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        // Adjust the padding for floating and inset variants.
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarContent.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarContent.vue
new file mode 100644
index 0000000000..bb6d9f1dd5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarContent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarFooter.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarFooter.vue
new file mode 100644
index 0000000000..20dd72f47b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarFooter.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-footer"
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroup.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroup.vue
new file mode 100644
index 0000000000..fbb4887399
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-group"
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupAction.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupAction.vue
new file mode 100644
index 0000000000..f5fa5eb0c8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupContent.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupContent.vue
new file mode 100644
index 0000000000..06e1a92fea
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-group-content"
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupLabel.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 0000000000..f5da1300da
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarHeader.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarHeader.vue
new file mode 100644
index 0000000000..79cf883320
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarHeader.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-header"
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarInput.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarInput.vue
new file mode 100644
index 0000000000..537296fa78
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Input
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    :class="cn(
+      'bg-background h-8 w-full shadow-none',
+      props.class,
+    )"
+  >
+    <slot />
+  </Input>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarInset.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarInset.vue
new file mode 100644
index 0000000000..f46b43a87f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarInset.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="cn(
+      'bg-background relative flex w-full flex-1 flex-col',
+      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenu.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenu.vue
new file mode 100644
index 0000000000..e1dd39ebc4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuAction.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuAction.vue
new file mode 100644
index 0000000000..bdffdb7d82
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  showOnHover?: boolean
+  class?: HTMLAttributes["class"]
+}>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuBadge.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 0000000000..432161842f
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuButton.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuButton.vue
new file mode 100644
index 0000000000..6dc7f8f5c1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { Component } from "vue"
+import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
+import { useSidebar } from "./utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  tooltip?: string | Component
+}>(), {
+  as: "button",
+  variant: "default",
+  size: "default",
+})
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = reactiveOmit(props, "tooltip")
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuButtonChild.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 0000000000..4b4ca3ba48
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SidebarMenuButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sidebarMenuButtonVariants } from "."
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants["variant"]
+  size?: SidebarMenuButtonVariants["size"]
+  isActive?: boolean
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: "button",
+  variant: "default",
+  size: "default",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuItem.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuItem.vue
new file mode 100644
index 0000000000..e2fda5b4db
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSkeleton.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 0000000000..bd4563efa4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes["class"]
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`
+})
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon"
+    />
+
+    <Skeleton
+      class="h-4 max-w-(--skeleton-width) flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSub.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSub.vue
new file mode 100644
index 0000000000..81c2dab9b0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSubButton.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 0000000000..457cfb634d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  size?: "sm" | "md"
+  isActive?: boolean
+  class?: HTMLAttributes["class"]
+}>(), {
+  as: "a",
+  size: "md",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSubItem.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 0000000000..d4374f65d0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    :class="cn('group/menu-sub-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarProvider.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarProvider.vue
new file mode 100644
index 0000000000..04ed975f96
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarProvider.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Ref } from "vue"
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
+import { TooltipProvider } from "reka-ui"
+import { computed, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean
+  open?: boolean
+  class?: HTMLAttributes["class"]
+}>(), {
+  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+  open: undefined,
+})
+
+const emits = defineEmits<{
+  "update:open": [open: boolean]
+}>()
+
+const isMobile = useMediaQuery("(max-width: 768px)")
+const openMobile = ref(false)
+
+const open = useVModel(props, "open", emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+}
+
+useEventListener("keydown", (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => open.value ? "expanded" : "collapsed")
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarRail.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarRail.vue
new file mode 100644
index 0000000000..1045a55ce0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarRail.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "./utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarSeparator.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarSeparator.vue
new file mode 100644
index 0000000000..c0f9ab16e7
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Separator
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/SidebarTrigger.vue b/frontend/app/web-gold/src/components/ui/sidebar/SidebarTrigger.vue
new file mode 100644
index 0000000000..c135ce6c0d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/SidebarTrigger.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { PanelLeft } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { useSidebar } from "./utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/index.ts b/frontend/app/web-gold/src/components/ui/sidebar/index.ts
new file mode 100644
index 0000000000..ef718a9ce1
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/index.ts
@@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority"
+import type { HTMLAttributes } from "vue"
+import { cva } from "class-variance-authority"
+
+export interface SidebarProps {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+  class?: HTMLAttributes["class"]
+}
+
+export { default as Sidebar } from "./Sidebar.vue"
+export { default as SidebarContent } from "./SidebarContent.vue"
+export { default as SidebarFooter } from "./SidebarFooter.vue"
+export { default as SidebarGroup } from "./SidebarGroup.vue"
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
+export { default as SidebarHeader } from "./SidebarHeader.vue"
+export { default as SidebarInput } from "./SidebarInput.vue"
+export { default as SidebarInset } from "./SidebarInset.vue"
+export { default as SidebarMenu } from "./SidebarMenu.vue"
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
+export { default as SidebarProvider } from "./SidebarProvider.vue"
+export { default as SidebarRail } from "./SidebarRail.vue"
+export { default as SidebarSeparator } from "./SidebarSeparator.vue"
+export { default as SidebarTrigger } from "./SidebarTrigger.vue"
+
+export { useSidebar } from "./utils"
+
+export const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/frontend/app/web-gold/src/components/ui/sidebar/utils.ts b/frontend/app/web-gold/src/components/ui/sidebar/utils.ts
new file mode 100644
index 0000000000..6e57eeb9b0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export const SIDEBAR_COOKIE_NAME = "sidebar_state"
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem"
+export const SIDEBAR_WIDTH_ICON = "3rem"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<"expanded" | "collapsed">
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>("Sidebar")
diff --git a/frontend/app/web-gold/src/components/ui/skeleton/Skeleton.vue b/frontend/app/web-gold/src/components/ui/skeleton/Skeleton.vue
new file mode 100644
index 0000000000..0dadcef9a2
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/skeleton/Skeleton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/skeleton/index.ts b/frontend/app/web-gold/src/components/ui/skeleton/index.ts
new file mode 100644
index 0000000000..e5ce72c352
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue"
diff --git a/frontend/app/web-gold/src/components/ui/slider/Slider.vue b/frontend/app/web-gold/src/components/ui/slider/Slider.vue
new file mode 100644
index 0000000000..bae7b72008
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/slider/Slider.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :class="cn(
+      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+    >
+      <SliderRange
+        data-slot="slider-range"
+        class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/slider/index.ts b/frontend/app/web-gold/src/components/ui/slider/index.ts
new file mode 100644
index 0000000000..f7a7b09659
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.vue"
diff --git a/frontend/app/web-gold/src/components/ui/sonner/Sonner.vue b/frontend/app/web-gold/src/components/ui/sonner/Sonner.vue
new file mode 100644
index 0000000000..6830896bb5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sonner/Sonner.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
+import { Toaster as Sonner } from "vue-sonner"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    }"
+    v-bind="props"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/sonner/index.ts b/frontend/app/web-gold/src/components/ui/sonner/index.ts
new file mode 100644
index 0000000000..6673112ed5
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue"
diff --git a/frontend/app/web-gold/src/components/ui/spinner/Spinner.vue b/frontend/app/web-gold/src/components/ui/spinner/Spinner.vue
new file mode 100644
index 0000000000..57cd1a968e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/spinner/Spinner.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Loader2Icon } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Loader2Icon
+    role="status"
+    aria-label="Loading"
+    :class="cn('size-4 animate-spin', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/spinner/index.ts b/frontend/app/web-gold/src/components/ui/spinner/index.ts
new file mode 100644
index 0000000000..aa63007547
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/spinner/index.ts
@@ -0,0 +1 @@
+export { default as Spinner } from "./Spinner.vue"
diff --git a/frontend/app/web-gold/src/components/ui/stepper/Stepper.vue b/frontend/app/web-gold/src/components/ui/stepper/Stepper.vue
new file mode 100644
index 0000000000..91a7ce6312
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/Stepper.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { StepperRootEmits, StepperRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot
+    v-slot="slotProps"
+    :class="cn(
+      'flex gap-2',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </StepperRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/stepper/StepperDescription.vue b/frontend/app/web-gold/src/components/ui/stepper/StepperDescription.vue
new file mode 100644
index 0000000000..49ce3abc58
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/StepperDescription.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { StepperDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot v-bind="slotProps" />
+  </StepperDescription>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/stepper/StepperIndicator.vue b/frontend/app/web-gold/src/components/ui/stepper/StepperIndicator.vue
new file mode 100644
index 0000000000..cb96e75e3a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/StepperIndicator.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { StepperIndicatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperIndicator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperIndicator
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',
+      // Disabled
+      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+      // Active
+      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+      // Completed
+      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot v-bind="slotProps" />
+  </StepperIndicator>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/stepper/StepperItem.vue b/frontend/app/web-gold/src/components/ui/stepper/StepperItem.vue
new file mode 100644
index 0000000000..fda449bbcd
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/StepperItem.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { StepperItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/stepper/StepperSeparator.vue b/frontend/app/web-gold/src/components/ui/stepper/StepperSeparator.vue
new file mode 100644
index 0000000000..33b5a735e0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/StepperSeparator.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { StepperSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperSeparator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+      'bg-muted',
+      // Disabled
+      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
+      // Completed
+      'group-data-[state=completed]:bg-accent',
+      props.class,
+    )"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/stepper/StepperTitle.vue b/frontend/app/web-gold/src/components/ui/stepper/StepperTitle.vue
new file mode 100644
index 0000000000..9004182969
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/StepperTitle.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { StepperTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+    <slot />
+  </StepperTitle>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/stepper/StepperTrigger.vue b/frontend/app/web-gold/src/components/ui/stepper/StepperTrigger.vue
new file mode 100644
index 0000000000..0cbb5399fa
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/StepperTrigger.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { StepperTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { StepperTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
+  >
+    <slot />
+  </StepperTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/stepper/index.ts b/frontend/app/web-gold/src/components/ui/stepper/index.ts
new file mode 100644
index 0000000000..a755492666
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/stepper/index.ts
@@ -0,0 +1,7 @@
+export { default as Stepper } from "./Stepper.vue"
+export { default as StepperDescription } from "./StepperDescription.vue"
+export { default as StepperIndicator } from "./StepperIndicator.vue"
+export { default as StepperItem } from "./StepperItem.vue"
+export { default as StepperSeparator } from "./StepperSeparator.vue"
+export { default as StepperTitle } from "./StepperTitle.vue"
+export { default as StepperTrigger } from "./StepperTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/switch/Switch.vue b/frontend/app/web-gold/src/components/ui/switch/Switch.vue
new file mode 100644
index 0000000000..2e725edb55
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/switch/Switch.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SwitchRoot,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-slot="slotProps"
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="cn(
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
+    >
+      <slot name="thumb" v-bind="slotProps" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/switch/index.ts b/frontend/app/web-gold/src/components/ui/switch/index.ts
new file mode 100644
index 0000000000..cc081f3f15
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue"
diff --git a/frontend/app/web-gold/src/components/ui/table/Table.vue b/frontend/app/web-gold/src/components/ui/table/Table.vue
new file mode 100644
index 0000000000..0d0cd9b4f0
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-auto">
+    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableBody.vue b/frontend/app/web-gold/src/components/ui/table/TableBody.vue
new file mode 100644
index 0000000000..d14a2d3232
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableBody.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tbody
+    data-slot="table-body"
+    :class="cn('[&_tr:last-child]:border-0', props.class)"
+  >
+    <slot />
+  </tbody>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableCaption.vue b/frontend/app/web-gold/src/components/ui/table/TableCaption.vue
new file mode 100644
index 0000000000..3630084506
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableCaption.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableCell.vue b/frontend/app/web-gold/src/components/ui/table/TableCell.vue
new file mode 100644
index 0000000000..d6e9ed24cf
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableCell.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableEmpty.vue b/frontend/app/web-gold/src/components/ui/table/TableEmpty.vue
new file mode 100644
index 0000000000..95193286d8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableEmpty.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableFooter.vue b/frontend/app/web-gold/src/components/ui/table/TableFooter.vue
new file mode 100644
index 0000000000..29e0ce9a38
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableHead.vue b/frontend/app/web-gold/src/components/ui/table/TableHead.vue
new file mode 100644
index 0000000000..f83efe569e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableHead.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
+  >
+    <slot />
+  </th>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableHeader.vue b/frontend/app/web-gold/src/components/ui/table/TableHeader.vue
new file mode 100644
index 0000000000..b4ab5cfb3a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <thead
+    data-slot="table-header"
+    :class="cn('[&_tr]:border-b', props.class)"
+  >
+    <slot />
+  </thead>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/TableRow.vue b/frontend/app/web-gold/src/components/ui/table/TableRow.vue
new file mode 100644
index 0000000000..8f1d172f7d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/TableRow.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
+  >
+    <slot />
+  </tr>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/table/index.ts b/frontend/app/web-gold/src/components/ui/table/index.ts
new file mode 100644
index 0000000000..3be308b55d
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"
diff --git a/frontend/app/web-gold/src/components/ui/table/utils.ts b/frontend/app/web-gold/src/components/ui/table/utils.ts
new file mode 100644
index 0000000000..3d4fd12fa8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/table/utils.ts
@@ -0,0 +1,10 @@
+import type { Updater } from "@tanstack/vue-table"
+
+import type { Ref } from "vue"
+import { isFunction } from "@tanstack/vue-table"
+
+export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
+  ref.value = isFunction(updaterOrValue)
+    ? updaterOrValue(ref.value)
+    : updaterOrValue
+}
diff --git a/frontend/app/web-gold/src/components/ui/tabs/Tabs.vue b/frontend/app/web-gold/src/components/ui/tabs/Tabs.vue
new file mode 100644
index 0000000000..d260a15c90
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tabs/Tabs.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TabsRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col gap-2', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TabsRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tabs/TabsContent.vue b/frontend/app/web-gold/src/components/ui/tabs/TabsContent.vue
new file mode 100644
index 0000000000..3186ee8896
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tabs/TabsList.vue b/frontend/app/web-gold/src/components/ui/tabs/TabsList.vue
new file mode 100644
index 0000000000..a64a2dad39
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tabs/TabsList.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tabs/TabsTrigger.vue b/frontend/app/web-gold/src/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 0000000000..45e424f755
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tabs/index.ts b/frontend/app/web-gold/src/components/ui/tabs/index.ts
new file mode 100644
index 0000000000..7f99b7f23b
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"
diff --git a/frontend/app/web-gold/src/components/ui/tags-input/TagsInput.vue b/frontend/app/web-gold/src/components/ui/tags-input/TagsInput.vue
new file mode 100644
index 0000000000..325110e993
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tags-input/TagsInput.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="slotProps" v-bind="forwarded" :class="cn(
+      'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tags-input/TagsInputInput.vue b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 0000000000..dbdcbeb3fb
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItem.vue b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 0000000000..30aa907b87
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItemDelete.vue b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 0000000000..9ec0acb862
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import { TagsInputItemDelete, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItemText.vue b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 0000000000..2566165015
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TagsInputItemText, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)">
+    <slot />
+  </TagsInputItemText>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tags-input/index.ts b/frontend/app/web-gold/src/components/ui/tags-input/index.ts
new file mode 100644
index 0000000000..8736692d5c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from "./TagsInput.vue"
+export { default as TagsInputInput } from "./TagsInputInput.vue"
+export { default as TagsInputItem } from "./TagsInputItem.vue"
+export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
+export { default as TagsInputItemText } from "./TagsInputItemText.vue"
diff --git a/frontend/app/web-gold/src/components/ui/textarea/Textarea.vue b/frontend/app/web-gold/src/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000000..790f10c573
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/textarea/Textarea.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/textarea/index.ts b/frontend/app/web-gold/src/components/ui/textarea/index.ts
new file mode 100644
index 0000000000..8ce91e9c3e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"
diff --git a/frontend/app/web-gold/src/components/ui/toggle-group/ToggleGroup.vue b/frontend/app/web-gold/src/components/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 0000000000..a445ceb734
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { toggleVariants } from "@/components/ui/toggle"
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = withDefaults(defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+  spacing?: number
+}>(), {
+  spacing: 0,
+})
+
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide("toggleGroup", {
+  variant: props.variant,
+  size: props.size,
+  spacing: props.spacing,
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    data-slot="toggle-group"
+    :data-size="size"
+    :data-variant="variant"
+    :data-spacing="spacing"
+    :style="{
+      '--gap': spacing,
+    }"
+    v-bind="forwarded"
+    :class="cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/toggle-group/ToggleGroupItem.vue b/frontend/app/web-gold/src/components/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000000..55f1082ad4
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupItem, useForwardProps } from "reka-ui"
+import { inject } from "vue"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
+  spacing?: number
+}
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+}>()
+
+const context = inject<ToggleGroupVariants>("toggleGroup")
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    data-slot="toggle-group-item"
+    :data-variant="context?.variant || variant"
+    :data-size="context?.size || size"
+    :data-spacing="context?.spacing"
+    v-bind="forwardedProps"
+    :class="cn(
+      toggleVariants({
+        variant: context?.variant || variant,
+        size: context?.size || size,
+      }),
+      'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+      'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/toggle-group/index.ts b/frontend/app/web-gold/src/components/ui/toggle-group/index.ts
new file mode 100644
index 0000000000..c6ce2fc976
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.vue"
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue"
diff --git a/frontend/app/web-gold/src/components/ui/toggle/Toggle.vue b/frontend/app/web-gold/src/components/ui/toggle/Toggle.vue
new file mode 100644
index 0000000000..aea8e17d9a
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/toggle/Toggle.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ToggleVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Toggle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "."
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleVariants["variant"]
+  size?: ToggleVariants["size"]
+}>(), {
+  variant: "default",
+  size: "default",
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-slot="slotProps"
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </Toggle>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/toggle/index.ts b/frontend/app/web-gold/src/components/ui/toggle/index.ts
new file mode 100644
index 0000000000..d873390e7c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/toggle/index.ts
@@ -0,0 +1,28 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Toggle } from "./Toggle.vue"
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>
diff --git a/frontend/app/web-gold/src/components/ui/tooltip/Tooltip.vue b/frontend/app/web-gold/src/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000000..2a393d6dae
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    v-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tooltip/TooltipContent.vue b/frontend/app/web-gold/src/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000000..c5d2df9cf8
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tooltip/TooltipProvider.vue b/frontend/app/web-gold/src/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000000..395927d525
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tooltip/TooltipTrigger.vue b/frontend/app/web-gold/src/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000000..3332950e95
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/frontend/app/web-gold/src/components/ui/tooltip/index.ts b/frontend/app/web-gold/src/components/ui/tooltip/index.ts
new file mode 100644
index 0000000000..8f8d514d9e
--- /dev/null
+++ b/frontend/app/web-gold/src/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"