diff --git a/apps/shinkai-tray/src/components/chat/message.tsx b/apps/shinkai-tray/src/components/chat/message.tsx
index 9d42633dd..9d398b419 100644
--- a/apps/shinkai-tray/src/components/chat/message.tsx
+++ b/apps/shinkai-tray/src/components/chat/message.tsx
@@ -1,17 +1,19 @@
 import type { ShinkaiMessage } from '@shinkai_network/shinkai-message-ts/models';
 import { MessageSchemaType } from '@shinkai_network/shinkai-message-ts/models';
 import { ChatConversationMessage } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/types';
-import MarkdownPreview from '@uiw/react-markdown-preview';
-
-import { cn } from '../../lib/utils';
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
-import CopyToClipboardIcon from '../ui/copy-to-clipboard-icon';
 import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  CopyToClipboardIcon,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '../ui/tooltip';
+} from '@shinkai_network/shinkai-ui';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+
+import { cn } from '../../lib/utils';
 
 export const getMessageFilesInbox = (
   message: ShinkaiMessage,
@@ -70,7 +72,7 @@ const Message = ({
       </Avatar>
       <div
         className={cn(
-          'group flex items-start gap-1 break-words rounded-lg bg-transparent px-2.5 py-3 overflow-x-hidden',
+          'group flex items-start gap-1 overflow-x-hidden break-words rounded-lg bg-transparent px-2.5 py-3',
           message.isLocal
             ? 'rounded-tl-none border border-slate-800'
             : 'rounded-tr-none border-none bg-[rgba(217,217,217,0.04)]',
diff --git a/apps/shinkai-tray/src/components/ui/avatar.tsx b/apps/shinkai-tray/src/components/ui/avatar.tsx
deleted file mode 100644
index 9d6107afa..000000000
--- a/apps/shinkai-tray/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    className={cn(
-      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    className={cn('aspect-square h-full w-full', className)}
-    ref={ref}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/shinkai-tray/src/components/ui/button.tsx b/apps/shinkai-tray/src/components/ui/button.tsx
deleted file mode 100644
index 9ff48f1c3..000000000
--- a/apps/shinkai-tray/src/components/ui/button.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Loader } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-gray-300',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary-600 hover:bg-primary-700 text-white shadow dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
-        destructive:
-          'bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90',
-        outline:
-          'border border-gray-200 bg-transparent shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        secondary:
-          'bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
-        ghost:
-          'hover:bg-gray-800 hover:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50',
-        link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  isLoading?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { className, variant, size, asChild = false, isLoading = false, ...props },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {isLoading ? (
-          <Loader
-            className={cn('h-4 w-4 animate-spin', size !== 'icon' && 'mr-2')}
-          />
-        ) : null}
-        {isLoading && size === 'icon' ? null : props.children}
-      </Comp>
-    );
-  },
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/apps/shinkai-tray/src/components/ui/checkbox.tsx b/apps/shinkai-tray/src/components/ui/checkbox.tsx
deleted file mode 100644
index 51ae52220..000000000
--- a/apps/shinkai-tray/src/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon } from '@radix-ui/react-icons';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    className={cn(
-      'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}
-    >
-      <CheckIcon className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/apps/shinkai-tray/src/components/ui/command.tsx b/apps/shinkai-tray/src/components/ui/command.tsx
deleted file mode 100644
index 006d7b245..000000000
--- a/apps/shinkai-tray/src/components/ui/command.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { DialogProps } from '@radix-ui/react-dialog';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Command as CommandPrimitive } from 'cmdk';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-import { Dialog, DialogContent } from './dialog';
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-gray-400',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    className={cn('max-h-[280px] overflow-y-auto overflow-x-hidden', className)}
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    className="py-6 text-center text-sm"
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    className={cn(
-      'text-foreground overflow-hidden p-1 dark:text-gray-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    className={cn('-mx-1 h-px bg-slate-800 dark:bg-gray-800', className)}
-    ref={ref}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-gray-800 aria-selected:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-gray-800 dark:aria-selected:text-gray-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400',
-        className,
-      )}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = 'CommandShortcut';
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
diff --git a/apps/shinkai-tray/src/components/ui/copy-to-clipboard-icon.tsx b/apps/shinkai-tray/src/components/ui/copy-to-clipboard-icon.tsx
deleted file mode 100644
index 77dcd5843..000000000
--- a/apps/shinkai-tray/src/components/ui/copy-to-clipboard-icon.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { CheckCircle2, CopyIcon } from 'lucide-react';
-import { useState } from 'react';
-
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-
-type CopyToClipboardIconProps = {
-  string?: string;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-const CopyToClipboardIcon = ({
-  string,
-  children,
-  className,
-}: CopyToClipboardIconProps) => {
-  const [clipboard, setClipboard] = useState(false);
-
-  let timeout: ReturnType<typeof setTimeout>;
-  const onCopy = () => {
-    if (!string) return;
-    const string_ = string.trim();
-    navigator.clipboard.writeText(string_);
-    setClipboard(true);
-    clearTimeout(timeout);
-    timeout = setTimeout(() => setClipboard(false), 1000);
-  };
-
-  const ClipboardIcon = clipboard ? CheckCircle2 : CopyIcon;
-
-  return (
-    <Button
-      className={cn(
-        'text-muted-foreground flex gap-2 px-2 text-xs font-normal',
-        className,
-      )}
-      disabled={!string}
-      onClick={onCopy}
-      variant="ghost"
-    >
-      <ClipboardIcon className={cn('h-4 w-4', clipboard && 'text-green-600')} />
-      {children}
-    </Button>
-  );
-};
-
-export default CopyToClipboardIcon;
diff --git a/apps/shinkai-tray/src/components/ui/dialog.tsx b/apps/shinkai-tray/src/components/ui/dialog.tsx
deleted file mode 100644
index 72eccf934..000000000
--- a/apps/shinkai-tray/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal {...props} />
-);
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    className={cn(
-      'bg-app-gradient 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 backdrop-blur-sm',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      className={cn(
-        '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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-[#131B23] p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    className={cn('text-foreground text-xs', className)}
-    ref={ref}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
diff --git a/apps/shinkai-tray/src/components/ui/dots-loader.tsx b/apps/shinkai-tray/src/components/ui/dots-loader.tsx
deleted file mode 100644
index 18d01ceb4..000000000
--- a/apps/shinkai-tray/src/components/ui/dots-loader.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const DotsLoader = ({ className }: { className?: string }) => {
-  return (
-    <div className={className}>
-      <div className="flex h-4 space-x-1.5">
-        <div className="h-2 w-2 animate-[loaderDots_0.6s_0s_infinite_alternate] rounded-full bg-slate-100"></div>
-        <div className="h-2 w-2 animate-[loaderDots_0.6s_0.3s_infinite_alternate] rounded-full bg-slate-100"></div>
-        <div className="h-2 w-2 animate-[loaderDots_0.6s_0.6s_infinite_alternate] rounded-full bg-slate-100"></div>
-      </div>
-    </div>
-  );
-};
-
-export default DotsLoader;
diff --git a/apps/shinkai-tray/src/components/ui/error-message.tsx b/apps/shinkai-tray/src/components/ui/error-message.tsx
deleted file mode 100644
index f075ad541..000000000
--- a/apps/shinkai-tray/src/components/ui/error-message.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-const ErrorMessage = ({ message }: { message: string }) => {
-  return (
-    <div className="rounded bg-red-500/10 px-4 py-2 text-sm text-red-700">
-      <strong className="font-bold">Error: </strong>
-      <span className="block sm:inline"> {message} </span>
-    </div>
-  );
-};
-
-export default ErrorMessage;
diff --git a/apps/shinkai-tray/src/components/ui/form.tsx b/apps/shinkai-tray/src/components/ui/form.tsx
deleted file mode 100644
index 19f0f0f09..000000000
--- a/apps/shinkai-tray/src/components/ui/form.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form';
-
-import { cn } from '../../lib/utils';
-import { Label } from './label';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div className={cn('space-y-2', className)} ref={ref} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = 'FormItem';
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      className={cn(error && 'text-red-500 dark:text-red-900', className)}
-      htmlFor={formItemId}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
-      }
-      aria-invalid={!!error}
-      id={formItemId}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      className={cn(
-        'text-[0.8rem] text-gray-500 dark:text-gray-400',
-        className,
-      )}
-      id={formDescriptionId}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      className={cn(
-        'text-[0.8rem] font-medium text-red-500 dark:text-red-900',
-        className,
-      )}
-      id={formMessageId}
-      ref={ref}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = 'FormMessage';
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
diff --git a/apps/shinkai-tray/src/components/ui/hover-card.tsx b/apps/shinkai-tray/src/components/ui/hover-card.tsx
deleted file mode 100644
index 97a167e46..000000000
--- a/apps/shinkai-tray/src/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const HoverCard = HoverCardPrimitive.Root;
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    align={align}
-    className={cn(
-      '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 border-gray-200 bg-white p-4 text-gray-950 shadow-md outline-none dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50',
-      className,
-    )}
-    ref={ref}
-    sideOffset={sideOffset}
-    {...props}
-  />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/apps/shinkai-tray/src/components/ui/input.tsx b/apps/shinkai-tray/src/components/ui/input.tsx
deleted file mode 100644
index 0e660c5e9..000000000
--- a/apps/shinkai-tray/src/components/ui/input.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        className={cn(
-          'border-input focus-visible:ring-ring placeholder:text-muted-foreground flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        type={type}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = 'Input';
-
-export { Input };
diff --git a/apps/shinkai-tray/src/components/ui/label.tsx b/apps/shinkai-tray/src/components/ui/label.tsx
deleted file mode 100644
index c8e95c48a..000000000
--- a/apps/shinkai-tray/src/components/ui/label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    className={cn(labelVariants(), className)}
-    ref={ref}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
diff --git a/apps/shinkai-tray/src/components/ui/popover.tsx b/apps/shinkai-tray/src/components/ui/popover.tsx
deleted file mode 100644
index d500f67a0..000000000
--- a/apps/shinkai-tray/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      align={align}
-      className={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 outline-none',
-        className,
-      )}
-      ref={ref}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/shinkai-tray/src/components/ui/qr-code.tsx b/apps/shinkai-tray/src/components/ui/qr-code.tsx
deleted file mode 100644
index ece2fbcce..000000000
--- a/apps/shinkai-tray/src/components/ui/qr-code.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import type { IProps } from 'react-qrcode-logo';
-import { QRCode as ReactQRCode } from 'react-qrcode-logo';
-
-import shinkaiLogo from '../../../app-icon.png';
-
-export default function QRCode({
-  value,
-  size,
-  id,
-}: {
-  value: IProps['value'];
-  size: IProps['size'];
-  id?: IProps['id'];
-}): React.ReactElement {
-  return (
-    <ReactQRCode
-      eyeColor="black"
-      eyeRadius={10}
-      fgColor="black"
-      id={id}
-      logoHeight={40}
-      logoImage={shinkaiLogo}
-      logoPaddingStyle="circle"
-      logoWidth={size ? size * 0.2 : undefined}
-      qrStyle="dots"
-      removeQrCodeBehindLogo
-      size={size ?? 300}
-      value={value}
-    />
-  );
-}
diff --git a/apps/shinkai-tray/src/components/ui/scroll-area.tsx b/apps/shinkai-tray/src/components/ui/scroll-area.tsx
deleted file mode 100644
index 3f4e89091..000000000
--- a/apps/shinkai-tray/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport
-      className="h-full w-full rounded-[inherit]"
-      ref={ref}
-    >
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' &&
-        'h-2.5 border-t border-t-transparent p-[1px]',
-      className,
-    )}
-    orientation={orientation}
-    ref={ref}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb
-      className={cn(
-        'relative rounded-full bg-gray-400/20',
-        orientation === 'vertical' && 'flex-1',
-      )}
-    />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/apps/shinkai-tray/src/components/ui/select.tsx b/apps/shinkai-tray/src/components/ui/select.tsx
deleted file mode 100644
index d03390b67..000000000
--- a/apps/shinkai-tray/src/components/ui/select.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    className={cn(
-      'border-input ring-offset-background focus:ring-ring placeholder:text-muted-foreground flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      className={cn(
-        '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 min-w-[8rem] overflow-hidden rounded-md border bg-[#19242D] 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',
-        className,
-      )}
-      position={position}
-      ref={ref}
-      {...props}
-    >
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    ref={ref}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
-    ref={ref}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-};
diff --git a/apps/shinkai-tray/src/components/ui/separator.tsx b/apps/shinkai-tray/src/components/ui/separator.tsx
deleted file mode 100644
index b668ab98a..000000000
--- a/apps/shinkai-tray/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      className={cn(
-        'shrink-0 bg-slate-800 dark:bg-gray-800',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className,
-      )}
-      decorative={decorative}
-      orientation={orientation}
-      ref={ref}
-      {...props}
-    />
-  ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
diff --git a/apps/shinkai-tray/src/components/ui/skeleton.tsx b/apps/shinkai-tray/src/components/ui/skeleton.tsx
deleted file mode 100644
index 25372ee8c..000000000
--- a/apps/shinkai-tray/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { cn } from '../../lib/utils';
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'animate-pulse rounded-md bg-gray-300/10 dark:bg-gray-50/10',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };
diff --git a/apps/shinkai-tray/src/components/ui/switch.tsx b/apps/shinkai-tray/src/components/ui/switch.tsx
deleted file mode 100644
index e997aa9db..000000000
--- a/apps/shinkai-tray/src/components/ui/switch.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-gray-200 dark:focus-visible:ring-gray-300 dark:focus-visible:ring-offset-gray-950 dark:data-[state=checked]:bg-gray-50 dark:data-[state=unchecked]:bg-gray-800',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-gray-950',
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
diff --git a/apps/shinkai-tray/src/components/ui/textarea.tsx b/apps/shinkai-tray/src/components/ui/textarea.tsx
deleted file mode 100644
index eacfc300a..000000000
--- a/apps/shinkai-tray/src/components/ui/textarea.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const MIN_TEXTAREA_HEIGHT = 32;
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }) => {
-    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-
-    React.useLayoutEffect(() => {
-      // Reset height - important to shrink on delete
-      if (!textareaRef.current) return;
-      textareaRef.current.style.height = 'inherit';
-      // Set height
-      textareaRef.current.style.height = `${Math.max(
-        textareaRef.current.scrollHeight,
-        MIN_TEXTAREA_HEIGHT,
-      )}px`;
-
-      if (props.autoFocus !== undefined && props.autoFocus) {
-        textareaRef.current.focus();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.value]);
-
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[60px] w-full rounded-md border border-gray-500 bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300',
-          className,
-        )}
-        ref={textareaRef}
-        style={{
-          minHeight: MIN_TEXTAREA_HEIGHT,
-          resize: 'none',
-          maxHeight: '300px',
-        }}
-        {...props}
-      />
-    );
-  },
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea };
diff --git a/apps/shinkai-tray/src/components/ui/tooltip.tsx b/apps/shinkai-tray/src/components/ui/tooltip.tsx
deleted file mode 100644
index 4c3c7a348..000000000
--- a/apps/shinkai-tray/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from '../../lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    className={cn(
-      '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 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 dark:bg-gray-50 dark:text-gray-900',
-      className,
-    )}
-    ref={ref}
-    sideOffset={sideOffset}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/shinkai-tray/src/globals.css b/apps/shinkai-tray/src/globals.css
index af68d01c1..caf71f87d 100644
--- a/apps/shinkai-tray/src/globals.css
+++ b/apps/shinkai-tray/src/globals.css
@@ -49,12 +49,4 @@ body,
   @apply grid;
 }
 
-@keyframes loaderDots {
-  0% {
-    opacity: 1;
-  }
-  50%,
-  100% {
-    opacity: 0.15;
-  }
-}
+
diff --git a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
index f9d133265..24cb4c84a 100644
--- a/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
+++ b/apps/shinkai-tray/src/pages/chat/chat-conversation.tsx
@@ -9,6 +9,17 @@ import { useSendMessageToJob } from '@shinkai_network/shinkai-node-state/lib/mut
 import { useSendMessageToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageToInbox/useSendMessageToInbox';
 import { useSendMessageWithFilesToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageWithFilesToInbox/useSendMessageWithFilesToInbox';
 import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/useGetChatConversationWithPagination';
+import {
+  Button,
+  DotsLoader,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  ScrollArea,
+  Skeleton,
+} from '@shinkai_network/shinkai-ui';
 import { Placeholder } from '@tiptap/extension-placeholder';
 import { EditorContent, Extension, useEditor } from '@tiptap/react';
 import { StarterKit } from '@tiptap/starter-kit';
@@ -24,21 +35,12 @@ import {
 import { useDropzone } from 'react-dropzone';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 import { Markdown } from 'tiptap-markdown';
 import { z } from 'zod';
 
 import Message from '../../components/chat/message';
-import { Button } from '../../components/ui/button';
-import DotsLoader from '../../components/ui/dots-loader';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '../../components/ui/form';
-import { ScrollArea } from '../../components/ui/scroll-area';
-import { Skeleton } from '../../components/ui/skeleton';
 import { formatDate, groupMessagesByDate } from '../../lib/chat-conversation';
 import { cn } from '../../lib/utils';
 import { useAuth } from '../../store/auth';
@@ -336,7 +338,7 @@ const ChatConversation = () => {
                   )}
                   {!isImageOrPdf(file) && (
                     <div className="flex flex-col items-center gap-2">
-                      <FileCheck2 className="text-muted-foreground h-4 w-4 " />
+                      <FileCheck2 className="text-gray-80 h-4 w-4 " />
                       <span className="line-clamp-2 break-all px-2 text-center text-xs ">
                         {file?.name}
                       </span>
diff --git a/apps/shinkai-tray/src/pages/chat/empty-message.tsx b/apps/shinkai-tray/src/pages/chat/empty-message.tsx
index b15909484..b9e9aedba 100644
--- a/apps/shinkai-tray/src/pages/chat/empty-message.tsx
+++ b/apps/shinkai-tray/src/pages/chat/empty-message.tsx
@@ -1,5 +1,5 @@
-import { LightningBoltIcon } from '@radix-ui/react-icons';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
+import { buttonVariants } from '@shinkai_network/shinkai-ui';
 import { Link } from 'react-router-dom';
 
 import { ADD_AGENT_PATH, CREATE_JOB_PATH } from '../../routes/name';
@@ -38,8 +38,8 @@ const EmptyMessage = () => {
           />
         </svg>
 
-        <h1 className="text-foreground text-2xl font-bold">Ask Shinkai AI</h1>
-        <p className="text-muted-foreground text-sm">
+        <h1 className="text-2xl font-bold text-white">Ask Shinkai AI</h1>
+        <p className="text-gray-80 text-sm">
           Try “How to make a HTTP request in JavaScript” , “Give me the top 10
           rock music in the 80s”, “Explain me how internet works”
         </p>
@@ -47,18 +47,20 @@ const EmptyMessage = () => {
         <div className="mt-4">
           {agents.length === 0 ? (
             <Link
-              className="bg-primary-600 hover:bg-primary-700 flex h-9 items-center rounded-md px-6 py-2 font-medium text-white shadow transition-colors duration-150 "
+              className={buttonVariants({
+                variant: 'default',
+              })}
               to={ADD_AGENT_PATH}
             >
-              <LightningBoltIcon className="mr-2" />
               <span>Add Agent</span>
             </Link>
           ) : (
             <Link
-              className="bg-primary-600 hover:bg-primary-700 flex h-9 items-center rounded-md px-6 py-2 font-medium text-white shadow transition-colors duration-150 "
+              className={buttonVariants({
+                variant: 'default',
+              })}
               to={CREATE_JOB_PATH}
             >
-              <LightningBoltIcon className="mr-2" />
               <span>Create Job</span>
             </Link>
           )}
diff --git a/apps/shinkai-tray/src/pages/chat/layout.tsx b/apps/shinkai-tray/src/pages/chat/layout.tsx
index 24be63bad..c59b2e3ba 100644
--- a/apps/shinkai-tray/src/pages/chat/layout.tsx
+++ b/apps/shinkai-tray/src/pages/chat/layout.tsx
@@ -7,6 +7,17 @@ import {
 import { useUpdateInboxName } from '@shinkai_network/shinkai-node-state/lib/mutations/updateInboxName/useUpdateInboxName';
 import { GetInboxesOutput } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/types';
 import { useGetInboxes } from '@shinkai_network/shinkai-node-state/lib/queries/getInboxes/useGetInboxes';
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  Input,
+  ScrollArea,
+  Separator,
+} from '@shinkai_network/shinkai-ui';
 import { Query } from '@tanstack/react-query';
 import { Edit3, MessageCircleIcon, Workflow } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
@@ -14,17 +25,6 @@ import { useForm } from 'react-hook-form';
 import { Link, Outlet, useMatch } from 'react-router-dom';
 import { z } from 'zod';
 
-import { Button } from '../../components/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-} from '../../components/ui/form';
-import { Input } from '../../components/ui/input';
-import { ScrollArea } from '../../components/ui/scroll-area';
-import { Separator } from '../../components/ui/separator';
 import { handleSendNotification } from '../../lib/notifications';
 import { cn } from '../../lib/utils';
 import { useAuth } from '../../store/auth';
@@ -173,7 +173,7 @@ const MessageButton = ({
   ) : (
     <Link
       className={cn(
-        'text-muted-foreground group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-slate-800',
+        'text-gray-80 group flex h-[46px] w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-slate-800',
         match && 'text-foreground bg-slate-800',
       )}
       key={inboxId}
@@ -193,7 +193,7 @@ const MessageButton = ({
         size="icon"
         variant="ghost"
       >
-        <Edit3 className="text-muted-foreground h-4 w-4" />
+        <Edit3 className="text-gray-80 h-4 w-4" />
       </Button>
     </Link>
   );
diff --git a/apps/shinkai-tray/src/pages/create-agent.tsx b/apps/shinkai-tray/src/pages/create-agent.tsx
index b1c147b98..e8936b93a 100644
--- a/apps/shinkai-tray/src/pages/create-agent.tsx
+++ b/apps/shinkai-tray/src/pages/create-agent.tsx
@@ -1,27 +1,24 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useCreateAgent } from '@shinkai_network/shinkai-node-state/lib/mutations/createAgent/useCreateAgent';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
-import ErrorMessage from '../components/ui/error-message';
 import {
+  Button,
+  ErrorMessage,
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
-import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../components/ui/select';
+  TextField,
+} from '@shinkai_network/shinkai-ui';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
 import { CREATE_JOB_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
 import SimpleLayout from './layout/simple-layout';
@@ -102,42 +99,25 @@ const CreateAgentPage = () => {
               control={addAgentForm.control}
               name="agentName"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Agent Name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Eg: Personal AI Agent" {...field} />
-                  </FormControl>
-                </FormItem>
+                <TextField field={field} label="Agent Name" />
               )}
             />
             <FormField
               control={addAgentForm.control}
               name="externalUrl"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>External URL</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Eg: https://api.openai.com"
-                      {...field}
-                    />
-                  </FormControl>
-                </FormItem>
+                <TextField field={field} label="External URL" />
               )}
             />
             <FormField
               control={addAgentForm.control}
               name="apikey"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Api Key</FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder="Eg: xYz1DFa..." />
-                  </FormControl>
-                  <FormDescription className="pt-1 text-left text-xs">
-                    Enter the API key for your agent
-                  </FormDescription>
-                </FormItem>
+                <TextField
+                  field={field}
+                  helperMessage="Enter the API key for your agent"
+                  label="Api Key"
+                />
               )}
             />
 
@@ -169,12 +149,7 @@ const CreateAgentPage = () => {
                 control={addAgentForm.control}
                 name="modelType"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{model} Model Type</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Eg: gpt-3.5-turbo" {...field} />
-                    </FormControl>
-                  </FormItem>
+                  <TextField field={field} label={`${model} Model Type`} />
                 )}
               />
             )}
diff --git a/apps/shinkai-tray/src/pages/create-chat.tsx b/apps/shinkai-tray/src/pages/create-chat.tsx
index 971bc7af9..74e7d88bc 100644
--- a/apps/shinkai-tray/src/pages/create-chat.tsx
+++ b/apps/shinkai-tray/src/pages/create-chat.tsx
@@ -1,20 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useCreateChat } from '@shinkai_network/shinkai-node-state/lib/mutations/createChat/useCreateChat';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
 import {
+  Button,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
-import { Textarea } from '../components/ui/textarea';
+  Input,
+  Textarea,
+} from '@shinkai_network/shinkai-ui';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
 import { useAuth } from '../store/auth';
 import SimpleLayout from './layout/simple-layout';
 
@@ -86,7 +86,7 @@ const CreateChatPage = () => {
                   <FormLabel>Message</FormLabel>
                   <FormControl>
                     <Textarea
-                      className="resize-none border-white"
+                      className="resize-nonee"
                       onKeyDown={(event) => {
                         if (
                           event.key === 'Enter' &&
diff --git a/apps/shinkai-tray/src/pages/create-job.tsx b/apps/shinkai-tray/src/pages/create-job.tsx
index a979fd51c..4bf59ab54 100644
--- a/apps/shinkai-tray/src/pages/create-job.tsx
+++ b/apps/shinkai-tray/src/pages/create-job.tsx
@@ -2,30 +2,28 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { buildInboxIdFromJobId } from '@shinkai_network/shinkai-message-ts/utils/inbox_name_handler';
 import { useCreateJob } from '@shinkai_network/shinkai-node-state/lib/mutations/createJob/useCreateJob';
 import { useAgents } from '@shinkai_network/shinkai-node-state/lib/queries/getAgents/useGetAgents';
-import { FileCheck2, ImagePlusIcon, PlusIcon, X } from 'lucide-react';
-import { useEffect } from 'react';
-import { useDropzone } from 'react-dropzone';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
 import {
+  Button,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '../components/ui/form';
-import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../components/ui/select';
-import { Textarea } from '../components/ui/textarea';
+  Textarea,
+} from '@shinkai_network/shinkai-ui';
+import { FileCheck2, ImagePlusIcon, PlusIcon, X } from 'lucide-react';
+import { useEffect } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { z } from 'zod';
+
 import { cn } from '../lib/utils';
 import { ADD_AGENT_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
@@ -157,7 +155,7 @@ const CreateJobPage = () => {
                   <FormControl>
                     <Textarea
                       autoFocus={true}
-                      className="resize-none border-white"
+                      className="resize-none"
                       onKeyDown={(event) => {
                         if (
                           event.key === 'Enter' &&
@@ -214,7 +212,7 @@ const CreateJobPage = () => {
             <div>
               <FormLabel>
                 Upload a file
-                <span className="text-muted-foreground ml-1">(optional)</span>
+                <span className="text-gray-80 ml-1">(optional)</span>
               </FormLabel>
               <div className="flex gap-5">
                 <div
@@ -251,7 +249,7 @@ const CreateJobPage = () => {
                       )}
                       {!isImageOrPdf(file) && (
                         <div className="flex flex-col items-center gap-2">
-                          <FileCheck2 className="text-muted-foreground h-6 w-6 " />
+                          <FileCheck2 className="text-gray-80 h-6 w-6 " />
                           <span className="line-clamp-3 break-all px-2 text-center text-xs ">
                             {file?.name}
                           </span>
@@ -276,7 +274,7 @@ const CreateJobPage = () => {
                     </button>
                   )}
                 </div>
-                <span className="text-muted-foreground pt-4 text-xs font-bold">
+                <span className="text-gray-80 pt-4 text-xs font-bold">
                   Supported formats
                   <p className="mt-2">
                     Plain Text
@@ -295,7 +293,7 @@ const CreateJobPage = () => {
                       ].join(' • ')}
                     </span>
                   </p>
-                  <p className="text-muted-foreground mt-1 font-bold">
+                  <p className="text-gray-80 mt-1 font-bold">
                     Documents
                     <span className="block font-normal">
                       {[
diff --git a/apps/shinkai-tray/src/pages/generate-code.tsx b/apps/shinkai-tray/src/pages/generate-code.tsx
index 5ca9adf79..65437c564 100644
--- a/apps/shinkai-tray/src/pages/generate-code.tsx
+++ b/apps/shinkai-tray/src/pages/generate-code.tsx
@@ -1,32 +1,31 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DownloadIcon } from '@radix-ui/react-icons';
 import { useCreateRegistrationCode } from '@shinkai_network/shinkai-node-state/lib/mutations/createRegistrationCode/useCreateRegistrationCode';
-import { save } from '@tauri-apps/api/dialog';
-import { BaseDirectory, writeBinaryFile } from '@tauri-apps/api/fs';
-import { Check } from 'lucide-react';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { Button } from '../components/ui/button';
-import { Dialog, DialogContent } from '../components/ui/dialog';
 import {
+  Button,
+  Dialog,
+  DialogContent,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
-import QRCode from '../components/ui/qr-code';
-import {
+  QRCode,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../components/ui/select';
+  TextField,
+} from '@shinkai_network/shinkai-ui';
+import { save } from '@tauri-apps/api/dialog';
+import { BaseDirectory, writeBinaryFile } from '@tauri-apps/api/fs';
+import { Check } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
 import { SetupData, useAuth } from '../store/auth';
 import SimpleLayout from './layout/simple-layout';
 
@@ -173,13 +172,7 @@ const GenerateCodePage = () => {
                 control={form.control}
                 name="profile"
                 render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Profile</FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
+                  <TextField field={field} label="Profile" />
                 )}
               />
             )}
diff --git a/apps/shinkai-tray/src/pages/layout/main-layout.tsx b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
index 5216e1a14..df1ff7489 100644
--- a/apps/shinkai-tray/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/main-layout.tsx
@@ -4,12 +4,6 @@ import {
   PersonIcon,
   TokensIcon,
 } from '@radix-ui/react-icons';
-import { listen } from '@tauri-apps/api/event';
-import { BotIcon, BoxesIcon, MessageCircleIcon } from 'lucide-react';
-import * as React from 'react';
-import { useCallback } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
-
 import {
   Command,
   CommandGroup,
@@ -17,13 +11,17 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from '../../components/ui/command';
-import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '../../components/ui/popover';
-import { Separator } from '../../components/ui/separator';
+  Separator,
+} from '@shinkai_network/shinkai-ui';
+import { listen } from '@tauri-apps/api/event';
+import { BotIcon, BoxesIcon, MessageCircleIcon } from 'lucide-react';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+
 import {
   ADD_AGENT_PATH,
   CREATE_CHAT_PATH,
@@ -129,16 +127,16 @@ export function Footer() {
   };
 
   return (
-    <div className="text-muted-foreground absolute bottom-2 left-2 text-sm">
+    <div className="text-gray-80 absolute bottom-2 left-2 text-sm">
       <Popover modal onOpenChange={setOpen} open={open}>
         <PopoverTrigger
           aria-expanded={open}
-          className="bg-app-gradient rounded-lg px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-700/40"
+          className="rounded-lg bg-gray-400 px-2.5 py-2 shadow-lg transition-colors duration-150 hover:bg-gray-500/40"
           onClick={() => setOpen(true)}
         >
           <span className="text-xs">
             Actions
-            <kbd className="bg-muted text-muted-foreground pointer-events-none ml-2 inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
+            <kbd className="pointer-events-none ml-2 inline-flex h-5 select-none items-center gap-1 rounded border bg-gray-500 px-1.5 font-mono text-[10px] font-medium text-gray-100 opacity-100">
               <span className="text-xs">⌘</span>K
             </kbd>
           </span>
@@ -147,7 +145,7 @@ export function Footer() {
           align="start"
           alignOffset={0}
           asChild
-          className="rounded-md border-0 bg-black bg-gradient-to-r from-[#19242D] to-[#19242D]/90 p-4 shadow-xl"
+          className="rounded-md border-0 bg-gray-500 p-4 shadow-xl"
           side="top"
           sideOffset={2}
         >
@@ -207,7 +205,7 @@ export function Footer() {
 const MainLayout = () => {
   const auth = useAuth((state) => state.auth);
   return (
-    <div className="bg-app-gradient relative flex h-full flex-col bg-cover text-white">
+    <div className="bg-app-gradient relative flex h-full flex-col bg-gray-500 text-white">
       <div
         className="flex h-9 shrink-0 cursor-default select-none items-center justify-center text-xs"
         data-tauri-drag-region
diff --git a/apps/shinkai-tray/src/pages/layout/simple-layout.tsx b/apps/shinkai-tray/src/pages/layout/simple-layout.tsx
index a657cba58..e3c9567a5 100644
--- a/apps/shinkai-tray/src/pages/layout/simple-layout.tsx
+++ b/apps/shinkai-tray/src/pages/layout/simple-layout.tsx
@@ -1,4 +1,5 @@
 import { LucideArrowLeft } from 'lucide-react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { HOME_PATH } from '../../routes/name';
diff --git a/apps/shinkai-tray/src/pages/onboarding.tsx b/apps/shinkai-tray/src/pages/onboarding.tsx
index 529947dcd..d0eef77a6 100644
--- a/apps/shinkai-tray/src/pages/onboarding.tsx
+++ b/apps/shinkai-tray/src/pages/onboarding.tsx
@@ -5,22 +5,18 @@ import {
 } from '@shinkai_network/shinkai-message-ts/utils';
 import { queryClient } from '@shinkai_network/shinkai-node-state/lib/constants';
 import { useSubmitRegistrationNoCode } from '@shinkai_network/shinkai-node-state/lib/mutations/submitRegistation/useSubmitRegistrationNoCode';
+import {
+  Button,
+  ErrorMessage,
+  Form,
+  FormField,
+  TextField,
+} from '@shinkai_network/shinkai-ui';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
-import { Button } from '../components/ui/button';
-import ErrorMessage from '../components/ui/error-message';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '../components/ui/form';
-import { Input } from '../components/ui/input';
 import { HOME_PATH } from '../routes/name';
 import { useAuth } from '../store/auth';
 
@@ -175,13 +171,7 @@ const OnboardingPage = () => {
             control={setupDataForm.control}
             name="node_address"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Node Address</FormLabel>
-                <FormControl>
-                  <Input placeholder="Eg: http://localhost:9550" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
+              <TextField field={field} label={'Node Address'} />
             )}
           />
           {isError && <ErrorMessage message={error.message} />}
diff --git a/apps/shinkai-tray/tailwind.config.js b/apps/shinkai-tray/tailwind.config.js
index 9cdcdb4f9..a971f97fd 100644
--- a/apps/shinkai-tray/tailwind.config.js
+++ b/apps/shinkai-tray/tailwind.config.js
@@ -1,12 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+
+const { join } = require('path');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const sharedTailwindConfig = require('../../libs/shinkai-ui/src/shinkai-preset.js');
 
 module.exports = {
   presets: [sharedTailwindConfig],
-  darkMode: ['class'],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html,css}',
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
   ],
 };
diff --git a/libs/shinkai-ui/src/components/command.tsx b/libs/shinkai-ui/src/components/command.tsx
index 7b50f5019..4e40cead2 100644
--- a/libs/shinkai-ui/src/components/command.tsx
+++ b/libs/shinkai-ui/src/components/command.tsx
@@ -86,7 +86,7 @@ const CommandGroup = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Group
     className={cn(
-      'text-foreground overflow-hidden p-1 dark:text-gray-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400',
+      '[&_[cmdk-group-heading]]:text-gray-80 overflow-hidden p-1 text-white [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium dark:[&_[cmdk-group-heading]]:text-gray-400',
       className,
     )}
     ref={ref}
@@ -114,7 +114,7 @@ const CommandItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Item
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-gray-800 aria-selected:text-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-gray-800 dark:aria-selected:text-gray-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-gray-300 aria-selected:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     ref={ref}
@@ -130,10 +130,7 @@ const CommandShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400',
-        className,
-      )}
+      className={cn('text-gray-80 ml-auto text-xs tracking-widest', className)}
       {...props}
     />
   );
diff --git a/libs/shinkai-ui/src/components/textfield.tsx b/libs/shinkai-ui/src/components/textfield.tsx
index 85242fbf4..1d84632e1 100644
--- a/libs/shinkai-ui/src/components/textfield.tsx
+++ b/libs/shinkai-ui/src/components/textfield.tsx
@@ -2,7 +2,13 @@
 import React from 'react';
 
 import { cn } from '../utils';
-import { FormControl, FormItem, FormLabel, FormMessage } from './form';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './form';
 import { Input } from './input';
 
 const TextField = ({
@@ -10,6 +16,7 @@ const TextField = ({
   field,
   label,
   type = 'text',
+  helperMessage,
 }: {
   classes?: {
     formItem?: string;
@@ -26,6 +33,7 @@ const TextField = ({
     ref: (instance: any) => void;
   };
   label: React.ReactNode;
+  helperMessage?: React.ReactNode;
   type?: 'text' | 'password';
 }) => {
   return (
@@ -34,6 +42,7 @@ const TextField = ({
         <Input {...field} className={cn(classes?.input)} type={type} />
       </FormControl>
       <FormLabel className={cn(classes?.label)}>{label}</FormLabel>
+      <FormDescription>{helperMessage}</FormDescription>
       <FormMessage className={cn(classes?.helperMessage)} />
     </FormItem>
   );