diff --git a/package-lock.json b/package-lock.json
index 827c0608a..8182f49f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,10 +23,15 @@
                 "@jonkoops/matomo-tracker-react": "^0.7.0",
                 "@miblanchard/react-native-slider": "^2.1.0",
                 "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+                "@radix-ui/react-checkbox": "^1.1.1",
                 "@radix-ui/react-dialog": "^1.1.1",
+                "@radix-ui/react-popover": "^1.1.1",
+                "@radix-ui/react-radio-group": "^1.2.0",
+                "@radix-ui/react-select": "^2.1.1",
                 "@radix-ui/react-separator": "^1.1.0",
                 "@radix-ui/react-slot": "^1.1.0",
                 "@radix-ui/react-tabs": "^1.1.0",
+                "@radix-ui/react-toggle": "^1.1.0",
                 "@radix-ui/react-tooltip": "^1.1.2",
                 "@svgr/webpack": "^6.3.1",
                 "@tabler/icons-react": "^3.11.0",
@@ -7761,6 +7766,12 @@
                 }
             }
         },
+        "node_modules/@radix-ui/number": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+            "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==",
+            "dev": true
+        },
         "node_modules/@radix-ui/primitive": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
@@ -7790,6 +7801,36 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-checkbox": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz",
+            "integrity": "sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==",
+            "dev": true,
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.0",
+                "@radix-ui/react-compose-refs": "1.1.0",
+                "@radix-ui/react-context": "1.1.0",
+                "@radix-ui/react-presence": "1.1.0",
+                "@radix-ui/react-primitive": "2.0.0",
+                "@radix-ui/react-use-controllable-state": "1.1.0",
+                "@radix-ui/react-use-previous": "1.1.0",
+                "@radix-ui/react-use-size": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-collection": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
@@ -7982,6 +8023,43 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-popover": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
+            "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==",
+            "dev": true,
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.0",
+                "@radix-ui/react-compose-refs": "1.1.0",
+                "@radix-ui/react-context": "1.1.0",
+                "@radix-ui/react-dismissable-layer": "1.1.0",
+                "@radix-ui/react-focus-guards": "1.1.0",
+                "@radix-ui/react-focus-scope": "1.1.0",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-popper": "1.2.0",
+                "@radix-ui/react-portal": "1.1.1",
+                "@radix-ui/react-presence": "1.1.0",
+                "@radix-ui/react-primitive": "2.0.0",
+                "@radix-ui/react-slot": "1.1.0",
+                "@radix-ui/react-use-controllable-state": "1.1.0",
+                "aria-hidden": "^1.1.1",
+                "react-remove-scroll": "2.5.7"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-popper": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -8085,6 +8163,38 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-radio-group": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.0.tgz",
+            "integrity": "sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==",
+            "dev": true,
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.0",
+                "@radix-ui/react-compose-refs": "1.1.0",
+                "@radix-ui/react-context": "1.1.0",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-presence": "1.1.0",
+                "@radix-ui/react-primitive": "2.0.0",
+                "@radix-ui/react-roving-focus": "1.1.0",
+                "@radix-ui/react-use-controllable-state": "1.1.0",
+                "@radix-ui/react-use-previous": "1.1.0",
+                "@radix-ui/react-use-size": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-roving-focus": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
@@ -8116,6 +8226,49 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-select": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
+            "integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==",
+            "dev": true,
+            "dependencies": {
+                "@radix-ui/number": "1.1.0",
+                "@radix-ui/primitive": "1.1.0",
+                "@radix-ui/react-collection": "1.1.0",
+                "@radix-ui/react-compose-refs": "1.1.0",
+                "@radix-ui/react-context": "1.1.0",
+                "@radix-ui/react-direction": "1.1.0",
+                "@radix-ui/react-dismissable-layer": "1.1.0",
+                "@radix-ui/react-focus-guards": "1.1.0",
+                "@radix-ui/react-focus-scope": "1.1.0",
+                "@radix-ui/react-id": "1.1.0",
+                "@radix-ui/react-popper": "1.2.0",
+                "@radix-ui/react-portal": "1.1.1",
+                "@radix-ui/react-primitive": "2.0.0",
+                "@radix-ui/react-slot": "1.1.0",
+                "@radix-ui/react-use-callback-ref": "1.1.0",
+                "@radix-ui/react-use-controllable-state": "1.1.0",
+                "@radix-ui/react-use-layout-effect": "1.1.0",
+                "@radix-ui/react-use-previous": "1.1.0",
+                "@radix-ui/react-visually-hidden": "1.1.0",
+                "aria-hidden": "^1.1.1",
+                "react-remove-scroll": "2.5.7"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-separator": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
@@ -8187,6 +8340,31 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-toggle": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz",
+            "integrity": "sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==",
+            "dev": true,
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.0",
+                "@radix-ui/react-primitive": "2.0.0",
+                "@radix-ui/react-use-controllable-state": "1.1.0"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-tooltip": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz",
@@ -8287,6 +8465,21 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-use-previous": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+            "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+            "dev": true,
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-use-rect": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
diff --git a/package.json b/package.json
index e60ee295b..fdcf82bdc 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,15 @@
         "@jonkoops/matomo-tracker-react": "^0.7.0",
         "@miblanchard/react-native-slider": "^2.1.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+        "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-radio-group": "^1.2.0",
+        "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@svgr/webpack": "^6.3.1",
         "@tabler/icons-react": "^3.11.0",
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
new file mode 100644
index 000000000..737b36332
--- /dev/null
+++ b/src/components/Checkbox.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { IconCheck } from '@tabler/icons-react';
+import { cn } from '@/lib/Tailwind';
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>>(
+    ({ className, ...props }, ref) => (
+        <CheckboxPrimitive.Root
+            ref={ref}
+            className={cn(
+                'peer size-6 shrink-0 rounded-sm border-[0.5px] border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+                className
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+                <IconCheck className="size-4" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    )
+);
+
+export { Checkbox };
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index d73540748..31d925957 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,2 +1,20 @@
-import { Input } from 'native-base';
-export default Input;
+import * as React from 'react';
+import { cn } from '@/lib/Tailwind';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+    return (
+        <input
+            type={type}
+            className={cn(
+                'flex h-10 rounded-md border border-input bg-transparent px-3 py-1 text-form font-normal text-primary transition-colors file:border-0 file:bg-transparent file:text-form file:py-2 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                className
+            )}
+            ref={ref}
+            {...props}
+        />
+    );
+});
+
+export { Input };
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
new file mode 100644
index 000000000..5c1117cf4
--- /dev/null
+++ b/src/components/Label.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/Tailwind';
+
+const labelVariants = cva('text-form leading-4 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, ...props }, ref) => (
+    <label ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+
+export { Label };
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
new file mode 100644
index 000000000..11459c561
--- /dev/null
+++ b/src/components/Popover.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@/lib/Tailwind';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+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
+                ref={ref}
+                align={align}
+                sideOffset={sideOffset}
+                className={cn(
+                    'z-50 w-72 rounded-md border border-input bg-popover p-4 text-popover-foreground 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',
+                    className
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    )
+);
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
new file mode 100644
index 000000000..a80b7234a
--- /dev/null
+++ b/src/components/RadioGroup.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { IconCheck } from '@tabler/icons-react';
+import { cn } from '@/lib/Tailwind';
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>>(
+    ({ className, ...props }, ref) => {
+        return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
+    }
+);
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>>(
+    ({ className, ...props }, ref) => {
+        return (
+            <RadioGroupPrimitive.Item
+                ref={ref}
+                className={cn(
+                    'aspect-square size-6 rounded-full border-[0.5px] border-primary data-[state=checked]:bg-primary text-primary-foreground shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                    className
+                )}
+                {...props}
+            >
+                <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+                    <IconCheck className="size-3" />
+                </RadioGroupPrimitive.Indicator>
+            </RadioGroupPrimitive.Item>
+        );
+    }
+);
+
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 000000000..44fef78bc
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { IconSelector, IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '@/lib/Tailwind';
+
+const Select = SelectPrimitive.Root;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>>(
+    ({ className, children, ...props }, ref) => (
+        <SelectPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                'flex h-10 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-form font-normal ring-offset-background placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <SelectPrimitive.Icon asChild>
+                <IconSelector className="h-4 w-4 opacity-50" />
+            </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+    )
+);
+
+const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Content>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>>(
+    ({ className, children, position = 'popper', ...props }, ref) => (
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                ref={ref}
+                className={cn(
+                    'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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',
+                    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}
+                {...props}
+            >
+                <SelectPrimitive.ScrollUpButton className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
+                    <IconChevronUp />
+                </SelectPrimitive.ScrollUpButton>
+                <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.ScrollDownButton className={cn('flex cursor-default items-center justify-center py-1', className)} {...props}>
+                    <IconChevronDown />
+                </SelectPrimitive.ScrollDownButton>
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    )
+);
+
+const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>>(
+    ({ className, children, ...props }, ref) => (
+        <SelectPrimitive.Item
+            ref={ref}
+            className={cn(
+                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                className
+            )}
+            {...props}
+        >
+            <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+                <SelectPrimitive.ItemIndicator>
+                    <IconCheck className="h-4 w-4" />
+                </SelectPrimitive.ItemIndicator>
+            </span>
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        </SelectPrimitive.Item>
+    )
+);
+
+export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem };
diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx
new file mode 100644
index 000000000..d2fa2a79f
--- /dev/null
+++ b/src/components/TextArea.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/Tailwind';
+
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...props }, ref) => {
+    return (
+        <textarea
+            className={cn(
+                'flex min-h-[60px] rounded-md border border-input bg-transparent px-3 py-3 text-form font-normal text-primary placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                className
+            )}
+            ref={ref}
+            {...props}
+        />
+    );
+});
+
+export { TextArea };
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
new file mode 100644
index 000000000..5a950dd90
--- /dev/null
+++ b/src/components/Toggle.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/Tailwind';
+
+const toggleVariants = cva(
+    'inline-flex items-center justify-center rounded-md text-form font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+    {
+        variants: {
+            variant: {
+                default: 'hover:bg-accent hover:text-accent-foreground',
+                outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+                'outline-primary': 'border border-primary text-primary bg-transparent hover:bg-accent hover:text-accent-foreground',
+            },
+            size: {
+                default: 'h-9 px-3',
+                sm: 'h-8 px-2',
+                lg: 'h-10 px-3',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+);
+
+const Toggle = React.forwardRef<
+    React.ElementRef<typeof TogglePrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />);
+
+export { Toggle, toggleVariants };
diff --git a/tailwind.config.js b/tailwind.config.js
index 0e572bbc9..fb1778699 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -65,8 +65,8 @@ module.exports = {
                     foreground: 'hsl(var(--accent-foreground))',
                 },
                 popover: {
-                    DEFAULT: 'hsl(var(--popover))',
-                    foreground: 'hsl(var(--popover-foreground))',
+                    DEFAULT: 'hsl(var(--background))',
+                    foreground: 'hsl(var(--foreground))',
                 },
                 card: {
                     DEFAULT: 'hsl(var(--card))',