diff --git a/ui/package-lock.json b/ui/package-lock.json
index e78320e..3759b63 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,7 +8,7 @@
       "name": "@accuribet/ui",
       "version": "0.0.1",
       "dependencies": {
-        "@kobalte/core": "^0.12.1",
+        "@kobalte/core": "^0.12.6",
         "@solidjs/router": "^0.10.9",
         "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
diff --git a/ui/package.json b/ui/package.json
index 3ed556f..6dddb43 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "description": "Web UI for Accuribet",
   "dependencies": {
-    "@kobalte/core": "^0.12.1",
+    "@kobalte/core": "^0.12.6",
     "@solidjs/router": "^0.10.9",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
@@ -30,6 +30,7 @@
     "dev": "vite",
     "build": "vite build",
     "build:prod": "vite build --mode production",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "ui:add": "npx solidui-cli@latest add"
   }
 }
diff --git a/ui/src/components/animated-div.tsx b/ui/src/components/animated-div.tsx
index 38f3cc2..e09a9ee 100644
--- a/ui/src/components/animated-div.tsx
+++ b/ui/src/components/animated-div.tsx
@@ -1,11 +1,12 @@
 import { ComponentProps, JSX } from 'solid-js';
-import { Motion } from 'solid-motionone';
+import { Motion, VariantDefinition } from 'solid-motionone';
 import { Easing, EasingGenerator, EasingFunction } from '@motionone/types'
 
 export interface AnimationDivProps extends ComponentProps<'div'>{
   children?: JSX.Element;
   easing?: EasingGenerator | Easing | Easing[] | EasingFunction
   duration?: number;
+  animate?: VariantDefinition
 }
 
 
@@ -14,7 +15,7 @@ export function AnimationDiv(
 ) {
   return (
     <Motion.div
-      animate={{ opacity: [0, 1] }}
+      animate={props.animate || { opacity: [0, 1] }}
       transition={{ duration: props.duration || 1, easing: props.easing || 'ease-in-out' }}
       {...props}
     >
diff --git a/ui/src/components/ui/alert.tsx b/ui/src/components/ui/alert.tsx
new file mode 100644
index 0000000..fade2d9
--- /dev/null
+++ b/ui/src/components/ui/alert.tsx
@@ -0,0 +1,48 @@
+import type { Component, ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+import { Alert as AlertPrimitive } from "@kobalte/core"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+)
+
+interface AlertProps extends AlertPrimitive.AlertRootProps, VariantProps<typeof alertVariants> {}
+
+const Alert: Component<AlertProps> = (props) => {
+  const [, rest] = splitProps(props, ["class", "variant"])
+  return (
+    <AlertPrimitive.Root
+      class={cn(alertVariants({ variant: props.variant }), props.class)}
+      {...rest}
+    />
+  )
+}
+
+const AlertTitle: Component<ComponentProps<"h5">> = (props) => {
+  const [, rest] = splitProps(props, ["class"])
+  return <h5 class={cn("mb-1 font-medium leading-none tracking-tight", props.class)} {...rest} />
+}
+
+const AlertDescription: Component<ComponentProps<"div">> = (props) => {
+  const [, rest] = splitProps(props, ["class"])
+  return <div class={cn("text-sm [&_p]:leading-relaxed", props.class)} {...rest} />
+}
+
+export { Alert, AlertTitle, AlertDescription }