diff --git a/apps/v4/registry.json b/apps/v4/registry.json
index 875675f..dff5b37 100644
--- a/apps/v4/registry.json
+++ b/apps/v4/registry.json
@@ -51,7 +51,7 @@
       "title": "Emoji Picker",
       "description": "A emoji picker is a component that allows users to select an emoji from a list of emojis.",
       "dependencies": ["@base-ui/react", "frimousse"],
-      "registryDependencies": ["button", "popover"],
+      "registryDependencies": ["button", "input-group", "popover"],
       "files": [
         {
           "path": "src/registry/new-york/ui/emoji-picker.tsx",
diff --git a/apps/v4/src/registry/new-york/ui/date-picker.tsx b/apps/v4/src/registry/new-york/ui/date-picker.tsx
index f3a5685..bf0a87a 100644
--- a/apps/v4/src/registry/new-york/ui/date-picker.tsx
+++ b/apps/v4/src/registry/new-york/ui/date-picker.tsx
@@ -218,7 +218,7 @@ function DatePickerContent({
         <DatePickerPrimitive.Content
           data-slot="date-picker-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 w-auto origin-(--transform-origin) overflow-hidden rounded-md border p-0 shadow-md outline-hidden",
+            "bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 w-auto origin-(--transform-origin) overflow-hidden rounded-lg p-0 shadow-md ring-1 outline-hidden duration-100",
             className,
           )}
           {...props}
diff --git a/apps/v4/src/registry/new-york/ui/emoji-picker.tsx b/apps/v4/src/registry/new-york/ui/emoji-picker.tsx
index fae65f1..d780d23 100644
--- a/apps/v4/src/registry/new-york/ui/emoji-picker.tsx
+++ b/apps/v4/src/registry/new-york/ui/emoji-picker.tsx
@@ -15,6 +15,7 @@ import { LoaderIcon, SearchIcon } from "lucide-react";
 import * as React from "react";
 
 import { Button } from "@/components/ui/button";
+import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
 import {
   Popover,
   PopoverContent,
@@ -30,7 +31,7 @@ function EmojiPicker({
     <EmojiPickerPrimitive.Root
       data-slot="emoji-picker"
       className={cn(
-        "bg-popover text-popover-foreground isolate flex h-full w-fit flex-col overflow-hidden rounded-md",
+        "bg-popover text-popover-foreground isolate flex h-full w-fit flex-col overflow-hidden rounded-lg",
         className,
       )}
       {...props}
@@ -45,14 +46,18 @@ function EmojiPickerSearch({
   return (
     <div
       data-slot="emoji-picker-search-wrapper"
-      className={cn("flex h-9 items-center gap-2 border-b px-3", className)}
+      className={cn("p-1 pb-0", className)}
     >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <EmojiPickerPrimitive.Search
-        data-slot="emoji-picker-search"
-        className="placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
-        {...props}
-      />
+      <InputGroup className="border-input/30 bg-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <EmojiPickerPrimitive.Search
+          data-slot="emoji-picker-search"
+          className="placeholder:text-muted-foreground w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
     </div>
   );
 }