diff --git a/packages/react/.eslintrc.cjs b/packages/react/.eslintrc.cjs
index ad75bc933..fc6ad2b96 100644
--- a/packages/react/.eslintrc.cjs
+++ b/packages/react/.eslintrc.cjs
@@ -32,7 +32,7 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
-    '@typescript-eslint/no-unused-vars': ['warn'],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
     "tailwindcss/no-custom-classname": ['warn']
   },
 }
diff --git a/packages/react/src/Kitchensink.tsx b/packages/react/src/Kitchensink.tsx
index 0f241d260..0d4644179 100644
--- a/packages/react/src/Kitchensink.tsx
+++ b/packages/react/src/Kitchensink.tsx
@@ -23,7 +23,7 @@ function App() {
       <hr className="border-base" />
 
       <h3>Color and variants:</h3>
-      <div className="tems-start flex max-w-5xl flex-row flex-wrap justify-start gap-4">
+      <div className="flex max-w-5xl flex-row flex-wrap items-start justify-start gap-4">
         <Button>Default button</Button>
         <Button variant="ghost">Ghost button</Button>
         <Button variant="outline">Outline button</Button>
diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx
index 3f5dd6688..182e6b0ba 100644
--- a/packages/react/src/components/channel/ChannelCard.tsx
+++ b/packages/react/src/components/channel/ChannelCard.tsx
@@ -31,7 +31,7 @@ export function ChannelCard({
     // Set min-height because react-virtuoso will break if the height is not fixed
     <div className="flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4">
       <img className="h-24 w-24 rounded-full" src={photo ?? ""} />
-      <div className="font-xl line-clamp-2 text-center font-bold">{name}</div>
+      <div className="line-clamp-2 text-center text-lg font-bold">{name}</div>
       <div className="flex flex-col items-center">
         <div className="whitespace-nowrap text-sm text-base-11">
           {t("component.channelInfo.subscriberCount", {
diff --git a/packages/react/src/components/common/ErrorFallback.tsx b/packages/react/src/components/common/ErrorFallback.tsx
index 2502472dd..5635c6c52 100644
--- a/packages/react/src/components/common/ErrorFallback.tsx
+++ b/packages/react/src/components/common/ErrorFallback.tsx
@@ -5,7 +5,7 @@ import { useRouteError } from "react-router-dom";
 import { Button } from "@/shadcn/ui/button";
 import { useAuth } from "@/hooks/useAuth";
 
-export function ErrorFallback(props?: FallbackProps) {
+export function ErrorFallback(props?: Partial<FallbackProps>) {
   const routeError = useRouteError() as Error | null;
   const { t } = useTranslation();
   const { logout } = useAuth();
diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
index 35b796a86..cdc7d0ecc 100644
--- a/packages/react/src/components/header/header.tsx
+++ b/packages/react/src/components/header/header.tsx
@@ -1,38 +1,48 @@
+import { toggleSidebarAtom } from "@/hooks/useFrame";
 import { darkAtom } from "@/hooks/useTheme";
 import { Button } from "@/shadcn/ui/button";
+import { Input } from "@/shadcn/ui/input";
 import { userAtom } from "@/store/auth";
 import { useAtom, useAtomValue } from "jotai";
+import { useSetAtom } from "jotai/react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-interface HeaderProps {
-  onClick: () => void;
+interface HeaderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>{
   id: string;
 }
 
-export function Header({ onClick, id }: HeaderProps) {
+export function Header({ id }: HeaderProps) {
   const { t } = useTranslation();
   const [dark, toggle] = useAtom(darkAtom);
   const user = useAtomValue(userAtom);
+  const frameToggleSidebar = useSetAtom(toggleSidebarAtom);
 
   return (
     <header
       id={id}
-      className="py-auto sticky top-0 z-40 flex items-center gap-4 bg-base-2 px-8"
+      className="z-40 flex items-center gap-4 bg-base-2 pl-2"
     >
-      <Button size="icon-lg" variant="ghost" onClick={onClick}>
+      <Button size="icon" variant="ghost" className="h-12 w-12 p-4" onClick={frameToggleSidebar}>
         <div className="i-heroicons:bars-3 rounded-md p-3" />
       </Button>
-      <div className="justify-start py-1 pl-3 text-xl">Hololive</div>
-      <div className="i-heroicons:chevron-down py-5" />
       <div className="flex grow" />
+      <Input type="search" placeholder="Search" className="max-w-lg" />
       <Button
-        size="icon-lg"
+        size="icon"
         variant="ghost"
-        className="p-2"
+        className="-ml-3 p-0 text-base-9"
         onClick={() => toggle(!dark)}
       >
-        <div className="i-heroicons:sun-20-solid h-full text-4xl" />
+        <div className="i-heroicons:magnifying-glass h-full text-xl" />
+      </Button>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="p-0 text-base-9"
+        onClick={() => toggle(!dark)}
+      >
+        <div className="i-heroicons:sun-20-solid h-full text-xl " />
       </Button>
       {user ? (
         <img
diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
index 6fa36c3e6..b7ea3623c 100644
--- a/packages/react/src/components/layout/Frame.tsx
+++ b/packages/react/src/components/layout/Frame.tsx
@@ -6,9 +6,10 @@ import {
   isFloatingAtom,
   isMobileAtom,
   onResizeAtom,
-  sidebarOpenAtom,
+  toggleSidebarAtom,
   sidebarShouldBeFullscreenAtom,
-  toggleAtom,
+  openSidebarAtom,
+  isSidebarOpenAtom,
 } from "@/hooks/useFrame";
 import { useAtomValue, useSetAtom } from "jotai/react";
 import { darkAtom } from "@/hooks/useTheme";
@@ -22,7 +23,7 @@ import { Loading } from "../common/Loading";
 
 export function Frame() {
   const location = useLocation();
-  const toggle = useSetAtom(toggleAtom);
+  const toggle = useSetAtom(toggleSidebarAtom);
   const resize = useSetAtom(onResizeAtom);
   const dark = useAtomValue(darkAtom);
   const org = useAtomValue(orgAtom);
@@ -33,7 +34,7 @@ export function Frame() {
   }, []);
 
   const floating = useAtomValue(isFloatingAtom);
-  const open = useAtomValue(sidebarOpenAtom);
+  const open = useAtomValue(isSidebarOpenAtom);
   const isMobile = useAtomValue(isMobileAtom);
   const fs = useAtomValue(sidebarShouldBeFullscreenAtom);
   console.log(fs);
@@ -55,7 +56,7 @@ export function Frame() {
       <aside className="z-50 border-r border-r-base">
         <Sidebar id="sidebar" onClose={toggle} />
       </aside>
-      <Header onClick={toggle} id="header" />
+      <Header id="header"/>
       <main className="">
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <Suspense fallback={<Loading size="xl" />}>
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
index f30ec570c..2dd938d32 100644
--- a/packages/react/src/components/sidebar/sidebar.tsx
+++ b/packages/react/src/components/sidebar/sidebar.tsx
@@ -167,8 +167,9 @@ function SidebarItem({
       asChild
       className={cn(
         "w-full justify-start",
-        { "text-white": isHere },
         className,
+        { "text-base-12 font-semibold": isHere },
+        { 'font-base-11 font-light': !isHere },
       )}
       variant={isHere ? "default" : "ghost"}
       onClick={isMobile ? onClose : undefined}
diff --git a/packages/react/src/hooks/useFrame.ts b/packages/react/src/hooks/useFrame.ts
index f6f8b31f6..6a0e8e1c5 100644
--- a/packages/react/src/hooks/useFrame.ts
+++ b/packages/react/src/hooks/useFrame.ts
@@ -20,7 +20,7 @@ export const isMobileAtom = atom(
   (get) => get(sidebarShouldBeFullscreenAtom) //&& /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 );
 
-export const sidebarOpenAtom = atom(window.innerWidth > MobileSizeBreak);
+export const isSidebarOpenAtom = atom(window.innerWidth > MobileSizeBreak);
 
 export const onResizeAtom = atom(
   null,
@@ -30,9 +30,9 @@ export const onResizeAtom = atom(
     set(sidebarShouldBeFullscreenAtom, width < FooterSizeBreak);
     if (width < MobileSizeBreak) {
       console.log("closing")
-      set(sidebarOpenAtom, false)
+      set(isSidebarOpenAtom, false)
     } else {
-      set(sidebarOpenAtom, get(sidebarPrefOpenAtom))
+      set(isSidebarOpenAtom, get(sidebarPrefOpenAtom))
     }
   }
 );
@@ -42,10 +42,10 @@ export const onNavigateAtom = atom(
   (get, set, pageIsFullscreen: boolean) => {
     const currentFullscreenStatus = get(pageIsFullscreenAtom);
     if (currentFullscreenStatus !== pageIsFullscreen && pageIsFullscreen) {
-      set(sidebarOpenAtom, false);
+      set(isSidebarOpenAtom, false);
     }
     else if (currentFullscreenStatus !== pageIsFullscreen && !pageIsFullscreen) {
-      set(sidebarOpenAtom, get(sidebarPrefOpenAtom));
+      set(isSidebarOpenAtom, get(sidebarPrefOpenAtom));
     }
     if (currentFullscreenStatus !== pageIsFullscreen) {
       set(pageIsFullscreenAtom, pageIsFullscreen);
@@ -53,27 +53,27 @@ export const onNavigateAtom = atom(
   }
 );
 
-export const toggleAtom = atom(
+export const toggleSidebarAtom = atom(
   null,
   (get, set) => {
-    const currentOpenStatus = get(sidebarOpenAtom);
-    set(sidebarOpenAtom, !currentOpenStatus);
+    const currentOpenStatus = get(isSidebarOpenAtom);
+    set(isSidebarOpenAtom, !currentOpenStatus);
     set(sidebarPrefOpenAtom, !currentOpenStatus);
   }
 );
 
-export const openAtom = atom(
+export const openSidebarAtom = atom(
   null,
   (_, set) => {
-    set(sidebarOpenAtom, true);
+    set(isSidebarOpenAtom, true);
     set(sidebarPrefOpenAtom, true);
   }
 );
 
-export const closeAtom = atom(
+export const closeSidebarAtom = atom(
   null,
   (_, set) => {
-    set(sidebarOpenAtom, false);
+    set(isSidebarOpenAtom, false);
     set(sidebarPrefOpenAtom, false);
   }
 );
\ No newline at end of file
diff --git a/packages/react/src/routes/home.tsx b/packages/react/src/routes/home.tsx
index 55bf5cf67..831ab21f0 100644
--- a/packages/react/src/routes/home.tsx
+++ b/packages/react/src/routes/home.tsx
@@ -97,7 +97,7 @@ export function Home() {
 
   return (
     <Tabs
-      className="w-full p-4 md:p-8"
+      className="w-full p-4 md:px-8"
       defaultValue={tab}
       onValueChange={setTab}
     >
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
index fd9818f63..28a0132d9 100644
--- a/packages/react/src/routes/router.tsx
+++ b/packages/react/src/routes/router.tsx
@@ -3,11 +3,6 @@ import { Home } from "@/routes/home";
 import { getDefaultStore } from "jotai";
 import { orgAtom } from "@/store/org";
 import { Frame } from "@/components/layout/Frame";
-// import { ChannelsOrg } from "./channelsOrg";
-// import { Login } from "./login";
-// import { Settings } from "./settings";
-// import { About } from "./about";
-// import { Channel } from "./channel";
 import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex";
 import React from "react";
 
@@ -17,6 +12,7 @@ const About = React.lazy(() => import("./about"));
 const ChannelsOrg = React.lazy(() => import('./channelsOrg'));
 const Channel = React.lazy(() => import("./channel"));
 const Kitchensink = React.lazy(() => import("@/Kitchensink"));
+const ChannelsOrg = React.lazy(() => import("./channelsOrg"));
 
 const store = getDefaultStore();
 
diff --git a/packages/react/src/shadcn/ui/badge.tsx b/packages/react/src/shadcn/ui/badge.tsx
index 944f3c72b..0fac50dd4 100644
--- a/packages/react/src/shadcn/ui/badge.tsx
+++ b/packages/react/src/shadcn/ui/badge.tsx
@@ -4,22 +4,22 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  " inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         primary:
-          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         secondary:
-          "border-transparent bg-secondary-9 text-secondary-12 hover:bg-secondaryA-4",
+          "border-transparent bg-secondary-9 text-secondary-12 hover:bg-secondaryA-4 focus:ring-secondary-8",
         outline:
-          "text-base-12", // Assuming the foreground is a high-contrast text of base color
+          "text-base-12 focus:ring-base-8", // Assuming the foreground is a high-contrast text of base color
       },
       size: {
         default: "px-2.5 py-0.5 text-xs",
-        sm: "py-0.25 px-1.5 text-xs",
+        sm: "px-1.5 text-xs",
         lg: "px-3 py-1 text-sm",
       },
     },
diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx
index d4b425532..4fca34a72 100644
--- a/packages/react/src/shadcn/ui/button.tsx
+++ b/packages/react/src/shadcn/ui/button.tsx
@@ -1,37 +1,9 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
+import { type VariantProps } from "class-variance-authority"
+// import './button.css'
 import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary-9 text-base-12 hover:bg-primaryA-4",
-        outline:
-          "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-4",
-        secondary:
-          "bg-secondary-9 text-base-12 hover:bg-secondaryA-4",
-        ghost: "hover:bg-primary-4 hover:text-base-12",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-8 gap-2 px-3.5 py-2",
-        sm: "h-6 gap-1.5 rounded-md px-1 text-xs",
-        lg: "h-10 gap-3 rounded-md px-6 text-lg ",
-        icon: "h-8 w-8",
-        "icon-lg": "h-10 w-10 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+import { buttonVariants } from "./button.variants"
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -53,4 +25,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-export { Button, buttonVariants }
+export { Button }
diff --git a/packages/react/src/shadcn/ui/button.variants.ts b/packages/react/src/shadcn/ui/button.variants.ts
new file mode 100644
index 000000000..d8e1143fc
--- /dev/null
+++ b/packages/react/src/shadcn/ui/button.variants.ts
@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition focus-visible:outline-none focus-visible:ring-1 active:scale-[97%] disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-9 text-base-12 hover:bg-primaryA-5 focus-visible:ring-primary-7 active:bg-primaryA-7",
+        outline: "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-5 focus-visible:ring-primary-7",
+        secondary: "bg-secondary-9 text-base-12 hover:bg-secondaryA-4 focus-visible:ring-secondary-7 ",
+        ghost: "hover:bg-primary-4 hover:text-base-12 focus-visible:ring-primary-7 active:bg-primaryA-7",
+        link: "text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-secondary-7",
+      },
+      size: {
+        default: "h-8 gap-2 px-3.5 py-2",
+        sm: "h-6 gap-1.5 rounded-md px-1 text-xs",
+        lg: "h-10 gap-3 rounded-md px-6 text-lg ",
+        icon: "h-8 w-8",
+        "icon-lg": "h-10 w-10 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
diff --git a/packages/react/src/shadcn/ui/command.tsx b/packages/react/src/shadcn/ui/command.tsx
index 4c4318bf8..384f19d85 100644
--- a/packages/react/src/shadcn/ui/command.tsx
+++ b/packages/react/src/shadcn/ui/command.tsx
@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[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">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-base-9 [&_[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>
diff --git a/packages/react/src/shadcn/ui/dialog.tsx b/packages/react/src/shadcn/ui/dialog.tsx
index 6ab6827f4..c2ab8783e 100644
--- a/packages/react/src/shadcn/ui/dialog.tsx
+++ b/packages/react/src/shadcn/ui/dialog.tsx
@@ -3,8 +3,9 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { Cross2Icon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps } from "class-variance-authority"
 import { badgeVariants } from "./badge"
+import { dialogVariants } from "./dialog.variants"
 
 const Dialog = DialogPrimitive.Root
 
@@ -27,19 +28,6 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-const dialogVariants = cva(
-  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 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%] sm:rounded-lg md:w-full",
-  {
-    variants: {
-      variant: {
-        default: "border-base-7 bg-base-1",
-        primary: "border-primary-7 bg-primary-1",
-        secondary: "border-secondary-7 bg-secondary-1",
-      },
-    },
-  }
-);
-
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & VariantProps<typeof dialogVariants>
@@ -55,7 +43,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-base-1 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-7 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primaryA-3 data-[state=open]:text-primary">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -124,7 +112,6 @@ export {
   DialogPortal,
   DialogOverlay,
   DialogTrigger,
-  dialogVariants,
   DialogContent,
   DialogHeader,
   DialogFooter,
diff --git a/packages/react/src/shadcn/ui/dialog.variants.ts b/packages/react/src/shadcn/ui/dialog.variants.ts
new file mode 100644
index 000000000..02cd3c8fd
--- /dev/null
+++ b/packages/react/src/shadcn/ui/dialog.variants.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+
+export const dialogVariants = cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 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%] sm:rounded-lg md:w-full",
+  {
+    variants: {
+      variant: {
+        default: "border-base-7 bg-base-1",
+        primary: "border-primary-7 bg-primary-1",
+        secondary: "border-secondary-7 bg-secondary-1",
+      },
+    },
+  }
+);
diff --git a/packages/react/src/shadcn/ui/fancy-multiselect.tsx b/packages/react/src/shadcn/ui/fancy-multiselect.tsx
index 5e888f4c9..1b0a2f440 100644
--- a/packages/react/src/shadcn/ui/fancy-multiselect.tsx
+++ b/packages/react/src/shadcn/ui/fancy-multiselect.tsx
@@ -80,7 +80,7 @@ export function FancyMultiSelect() {
   return (
     <Command onKeyDown={handleKeyDown} className="overflow-visible bg-transparent">
       <div
-        className="border-input group rounded-md border border-base px-3 py-2 text-sm ring-offset-base-2 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
+        className="group rounded-md border border-base px-3 py-2 text-sm ring-offset-base-2 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
       >
         <div className="flex flex-wrap gap-1">
           {selected.map((framework) => {
@@ -100,7 +100,7 @@ export function FancyMultiSelect() {
                   }}
                   onClick={() => handleUnselect(framework)}
                 >
-                  <X className="hover:text-foreground h-3 w-3 text-base-8" />
+                  <X className="h-3 w-3 text-base-8 hover:text-base-11" />
                 </button>
               </Badge>
             )
diff --git a/packages/react/src/shadcn/ui/input.tsx b/packages/react/src/shadcn/ui/input.tsx
new file mode 100644
index 000000000..cd716a16f
--- /dev/null
+++ b/packages/react/src/shadcn/ui/input.tsx
@@ -0,0 +1,25 @@
+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
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-base bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-base-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primaryA-8 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }