diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83f7664..8b72020 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,29 +1,27 @@
-
-
 ## <small>1.3.5 (2024-12-16)</small>
 
-* fix: add bun to actions ([61be853](https://github.com/justdlabs/inertia.ts/commit/61be853))
+- fix: add bun to actions ([61be853](https://github.com/justdlabs/inertia.ts/commit/61be853))
 
 ## <small>1.3.4 (2024-12-16)</small>
 
-* fix: fix actions ([47e3a74](https://github.com/justdlabs/inertia.ts/commit/47e3a74))
+- fix: fix actions ([47e3a74](https://github.com/justdlabs/inertia.ts/commit/47e3a74))
 
 ## <small>1.3.3 (2024-12-16)</small>
 
-* fix: input error should not use cn from primitive ([cb816f7](https://github.com/justdlabs/inertia.ts/commit/cb816f7))
+- fix: input error should not use cn from primitive ([cb816f7](https://github.com/justdlabs/inertia.ts/commit/cb816f7))
 
 ## <small>1.3.2 (2024-12-16)</small>
 
-* fix: fix actions to use legacy ([0b691e5](https://github.com/justdlabs/inertia.ts/commit/0b691e5))
+- fix: fix actions to use legacy ([0b691e5](https://github.com/justdlabs/inertia.ts/commit/0b691e5))
 
 ## <small>1.3.1 (2024-12-16)</small>
 
-* change read me to add composer ([92f09dc](https://github.com/justdlabs/inertia.ts/commit/92f09dc))
+- change read me to add composer ([92f09dc](https://github.com/justdlabs/inertia.ts/commit/92f09dc))
 
 ## 1.3.0 (2024-12-16)
 
-* fix: little thing ([d7a113c](https://github.com/justdlabs/inertia.ts/commit/d7a113c))
-* feat: upgrade to react 19 and tailwindcss beta 7 ([afb1cdc](https://github.com/justdlabs/inertia.ts/commit/afb1cdc))
+- fix: little thing ([d7a113c](https://github.com/justdlabs/inertia.ts/commit/d7a113c))
+- feat: upgrade to react 19 and tailwindcss beta 7 ([afb1cdc](https://github.com/justdlabs/inertia.ts/commit/afb1cdc))
 
 ## [1.2.0](https://github.com/justdlabs/inertia.ts/compare/1.1.8...1.2.0) (2024-12-14)
 
diff --git a/justd.json b/justd.json
index f68b1c6..9bd3a1d 100644
--- a/justd.json
+++ b/justd.json
@@ -1,8 +1,9 @@
 {
-  "$schema": "https://getjustd.com",
+  "$schema": "https://getjustd.com/schema.json",
   "ui": "resources/js/components/ui",
-  "classes": "resources/js/utils",
-  "theme": "Default",
-  "css": "resources/css/app.css",
-  "created_at": "2024-10-07T20:33:03.716Z"
+  "utils": "resources/js/utils",
+  "gray": "zinc",
+  "css": "src/index.css",
+  "alias": "@",
+  "classes": "resources/js/utils"
 }
diff --git a/package.json b/package.json
index 3c6bd8e..beed079 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,12 @@
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "release-it": "^17.10.0",
-    "tailwindcss": "^4.0.0-beta.7",
+    "tailwindcss": "^4.0.0-beta.8",
     "typescript": "^5.7.2",
     "vite-plugin-watch": "^0.3.1"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.0.0-beta.7",
+    "@tailwindcss/vite": "^4.0.0-beta.8",
     "@types/node": "^22.10.2",
     "clsx": "^2.1.1",
     "justd-icons": "^1.10.4",
diff --git a/resources/js/components/ui/button.tsx b/resources/js/components/ui/button.tsx
index 770c719..ce03017 100644
--- a/resources/js/components/ui/button.tsx
+++ b/resources/js/components/ui/button.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   Button as ButtonPrimitive,
   type ButtonProps as ButtonPrimitiveProps,
diff --git a/resources/js/components/ui/checkbox.tsx b/resources/js/components/ui/checkbox.tsx
index ed4c443..0a74758 100644
--- a/resources/js/components/ui/checkbox.tsx
+++ b/resources/js/components/ui/checkbox.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { IconCheck, IconMinus } from 'justd-icons';
 import type {
   CheckboxGroupProps as CheckboxGroupPrimitiveProps,
diff --git a/resources/js/components/ui/dialog.tsx b/resources/js/components/ui/dialog.tsx
index 0877885..6fe27f3 100644
--- a/resources/js/components/ui/dialog.tsx
+++ b/resources/js/components/ui/dialog.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useRef } from 'react';
 
 import { IconX } from 'justd-icons';
@@ -7,22 +5,22 @@ import type { ButtonProps as ButtonPrimitiveProps, DialogProps, HeadingProps } f
 import { Button as ButtonPrimitive, Dialog as DialogPrimitive, Heading } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
+import { useMediaQuery } from '@/utils/use-media-query';
 import { Button, type ButtonProps } from './button';
-import { useMediaQuery } from './primitive';
 
 const dialogStyles = tv({
   slots: {
     root: [
-      'relative peer group flex max-h-[inherit] not-has-data-[slot=dialog-body]:**:data-[slot=dialog-header]:pb-0 [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-hidden'
+      'relative peer group/dialog flex max-h-[inherit] not-has-data-[slot=dialog-body]:**:data-[slot=dialog-header]:pb-0 [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-hidden'
     ],
     header: 'relative flex flex-col gap-0.5 sm:gap-1 p-4 sm:p-6',
     description: 'text-sm text-muted-fg',
     body: [
-      'has-[input]:py-1',
-      'flex flex-1 flex-col overflow-auto px-4 sm:px-6',
+      'has-[input]:pb-1',
+      'flex flex-1 isolate flex-col overflow-auto px-4 sm:px-6',
       'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'
     ],
-    footer: ['mt-auto flex flex-col-reverse justify-between gap-3 sm:flex-row', 'p-4 sm:p-6'],
+    footer: 'mt-auto flex isolate flex-col-reverse justify-between gap-3 sm:flex-row p-4 sm:p-6',
     closeIndicator:
       'close absolute right-1 top-1 sm:right-2 sm:top-2 data-focused:outline-hidden data-focused:bg-secondary data-hovered:bg-secondary grid place-content-center rounded-xl sm:rounded-md data-focus-visible:ring-1 data-focus-visible:ring-primary size-8 sm:size-7 z-50'
   }
diff --git a/resources/js/components/ui/dropdown.tsx b/resources/js/components/ui/dropdown.tsx
index a4f2062..3554f66 100644
--- a/resources/js/components/ui/dropdown.tsx
+++ b/resources/js/components/ui/dropdown.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { cn } from '@/utils/classes';
 import { IconCheck } from 'justd-icons';
 import {
diff --git a/resources/js/components/ui/field.tsx b/resources/js/components/ui/field.tsx
index 8cbe4fc..75bdb58 100644
--- a/resources/js/components/ui/field.tsx
+++ b/resources/js/components/ui/field.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { forwardRef } from 'react';
 
 import type {
diff --git a/resources/js/components/ui/form.tsx b/resources/js/components/ui/form.tsx
index a0e2f1c..a3c0027 100644
--- a/resources/js/components/ui/form.tsx
+++ b/resources/js/components/ui/form.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { FormProps } from 'react-aria-components';
 import { Form as FormPrimitive } from 'react-aria-components';
 
diff --git a/resources/js/components/ui/keyboard.tsx b/resources/js/components/ui/keyboard.tsx
index 85e12e1..97593d5 100644
--- a/resources/js/components/ui/keyboard.tsx
+++ b/resources/js/components/ui/keyboard.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Keyboard as KeyboardPrimitive } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
diff --git a/resources/js/components/ui/link.tsx b/resources/js/components/ui/link.tsx
index 7dbb9b4..012c232 100644
--- a/resources/js/components/ui/link.tsx
+++ b/resources/js/components/ui/link.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps, composeRenderProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
diff --git a/resources/js/components/ui/list-box.tsx b/resources/js/components/ui/list-box.tsx
index 1f7e502..80b45b8 100644
--- a/resources/js/components/ui/list-box.tsx
+++ b/resources/js/components/ui/list-box.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { IconCheck, IconHamburger } from 'justd-icons';
 import type { ListBoxItemProps, ListBoxProps } from 'react-aria-components';
 import { ListBoxItem, ListBox as ListBoxPrimitive, composeRenderProps } from 'react-aria-components';
diff --git a/resources/js/components/ui/loader.tsx b/resources/js/components/ui/loader.tsx
index aea3108..f06d867 100644
--- a/resources/js/components/ui/loader.tsx
+++ b/resources/js/components/ui/loader.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { cn } from '@/utils/classes';
 import { IconLoader } from 'justd-icons';
 import { ProgressBar } from 'react-aria-components';
diff --git a/resources/js/components/ui/menu.tsx b/resources/js/components/ui/menu.tsx
index 6317f92..26d636c 100644
--- a/resources/js/components/ui/menu.tsx
+++ b/resources/js/components/ui/menu.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, use } from 'react';
 
 import { IconBulletFill, IconCheck, IconChevronLgRight } from 'justd-icons';
diff --git a/resources/js/components/ui/modal.tsx b/resources/js/components/ui/modal.tsx
index 877d75b..3bb46d4 100644
--- a/resources/js/components/ui/modal.tsx
+++ b/resources/js/components/ui/modal.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { DialogProps, DialogTriggerProps, ModalOverlayProps } from 'react-aria-components';
 import { DialogTrigger, ModalOverlay, Modal as ModalPrimitive, composeRenderProps } from 'react-aria-components';
 import { type VariantProps, tv } from 'tailwind-variants';
diff --git a/resources/js/components/ui/navbar.tsx b/resources/js/components/ui/navbar.tsx
index 102c7ae..ac8cdce 100644
--- a/resources/js/components/ui/navbar.tsx
+++ b/resources/js/components/ui/navbar.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, use, useCallback, useId, useMemo, useState } from 'react';
 
 import { IconHamburger } from 'justd-icons';
@@ -9,8 +7,9 @@ import { Link, composeRenderProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
 import { cn } from '@/utils/classes';
+import { useMediaQuery } from '@/utils/use-media-query';
 import { Button } from './button';
-import { composeTailwindRenderProps, useMediaQuery } from './primitive';
+import { composeTailwindRenderProps } from './primitive';
 import { Sheet } from './sheet';
 
 type NavbarOptions = {
diff --git a/resources/js/components/ui/pagination.tsx b/resources/js/components/ui/pagination.tsx
index 428e813..c97c50a 100644
--- a/resources/js/components/ui/pagination.tsx
+++ b/resources/js/components/ui/pagination.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {
   IconChevronLgLeft,
   IconChevronLgRight,
diff --git a/resources/js/components/ui/popover.tsx b/resources/js/components/ui/popover.tsx
index 324340c..312d03d 100644
--- a/resources/js/components/ui/popover.tsx
+++ b/resources/js/components/ui/popover.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type {
   DialogTriggerProps,
   ModalOverlayProps,
@@ -18,9 +16,9 @@ import {
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
+import { useMediaQuery } from '@/utils/use-media-query';
 import { twMerge } from 'tailwind-merge';
 import { Dialog } from './dialog';
-import { useMediaQuery } from './primitive';
 
 const Popover = ({ children, ...props }: DialogTriggerProps) => {
   return <DialogTrigger {...props}>{children}</DialogTrigger>;
@@ -31,20 +29,20 @@ const Title = ({ level = 2, className, ...props }: React.ComponentProps<typeof D
 );
 
 const Header = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <Dialog.Header className={twMerge('p-0 sm:pt-0', className)} {...props} />
+  <Dialog.Header className={twMerge('sm:p-4', className)} {...props} />
 );
 
 const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <Dialog.Footer className={twMerge('pt-4 pb-0 sm:pb-0', className)} {...props} />
+  <Dialog.Footer className={twMerge('sm:p-4', className)} {...props} />
 );
 
 const Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <Dialog.Body className={twMerge('sm:p-0', className)} {...props} />
+  <Dialog.Body className={twMerge('sm:px-4', className)} {...props} />
 );
 
-const popoverContentStyles = tv({
+const content = tv({
   base: [
-    'max-w-xs transition-transform p-4 rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs dark:backdrop-saturate-200 sm:text-sm sm:max-w-3xl forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin]'
+    'max-w-xs transition-transform peer-not-has-[data=dialog-header]:p-4 rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs dark:backdrop-saturate-200 sm:text-sm sm:max-w-3xl forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin]'
   ],
   variants: {
     isPicker: { true: 'max-h-72 min-w-(--trigger-width) overflow-y-auto p-0', false: 'min-w-80' },
@@ -126,7 +124,7 @@ const Content = ({ respectScreen = true, children, showArrow = true, className,
         <Dialog
           role="dialog"
           aria-label={isMenu ? 'Menu' : props['aria-label']}
-          className="p-0 touch-none data-focused:outline-hidden"
+          className="p-0 sm:p-0 touch-none data-focused:outline-hidden"
         >
           {children}
         </Dialog>
@@ -137,7 +135,7 @@ const Content = ({ respectScreen = true, children, showArrow = true, className,
       offset={effectiveOffset}
       {...props}
       className={composeRenderProps(className, (className, renderProps) =>
-        popoverContentStyles({
+        content({
           ...renderProps,
           className
         })
@@ -165,7 +163,7 @@ const Picker = ({ children, className, ...props }: PopoverProps) => {
     <PopoverPrimitive
       {...props}
       className={composeRenderProps(className, (className, renderProps) =>
-        popoverContentStyles({
+        content({
           ...renderProps,
           isPicker: true,
           className
@@ -188,4 +186,4 @@ Popover.Header = Header;
 Popover.Picker = Picker;
 Popover.Title = Title;
 
-export { Popover, popoverContentStyles };
+export { Popover, content };
diff --git a/resources/js/components/ui/primitive.tsx b/resources/js/components/ui/primitive.tsx
index 5d515c4..34356b2 100644
--- a/resources/js/components/ui/primitive.tsx
+++ b/resources/js/components/ui/primitive.tsx
@@ -1,7 +1,3 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
 import { composeRenderProps } from 'react-aria-components';
 import { twMerge } from 'tailwind-merge';
 import { tv } from 'tailwind-variants';
@@ -39,22 +35,4 @@ const focusButtonStyles = tv({
   }
 });
 
-const useMediaQuery = (query: string) => {
-  const [value, setValue] = useState(false);
-
-  useEffect(() => {
-    const onChange = (event: MediaQueryListEvent) => {
-      setValue(event.matches);
-    };
-
-    const result = matchMedia(query);
-    result.addEventListener('change', onChange);
-    setValue(result.matches);
-
-    return () => result.removeEventListener('change', onChange);
-  }, [query]);
-
-  return value;
-};
-
-export { composeTailwindRenderProps, focusButtonStyles, focusRing, focusStyles, useMediaQuery };
+export { composeTailwindRenderProps, focusButtonStyles, focusRing, focusStyles };
diff --git a/resources/js/components/ui/select.tsx b/resources/js/components/ui/select.tsx
index eb7795f..b61a567 100644
--- a/resources/js/components/ui/select.tsx
+++ b/resources/js/components/ui/select.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { Placement } from '@react-types/overlays';
 import { IconChevronLgDown } from 'justd-icons';
 import {
diff --git a/resources/js/components/ui/separator.tsx b/resources/js/components/ui/separator.tsx
index 56b907c..39791b8 100644
--- a/resources/js/components/ui/separator.tsx
+++ b/resources/js/components/ui/separator.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Separator as Divider, type SeparatorProps as DividerProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
diff --git a/resources/js/components/ui/sheet.tsx b/resources/js/components/ui/sheet.tsx
index 95f6d24..1b6de66 100644
--- a/resources/js/components/ui/sheet.tsx
+++ b/resources/js/components/ui/sheet.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import type { DialogProps, DialogTriggerProps, ModalOverlayProps } from 'react-aria-components';
 import { DialogTrigger, Modal, ModalOverlay, composeRenderProps } from 'react-aria-components';
 import { type VariantProps, tv } from 'tailwind-variants';
diff --git a/resources/js/components/ui/table.tsx b/resources/js/components/ui/table.tsx
index fef6ef2..62c61ff 100644
--- a/resources/js/components/ui/table.tsx
+++ b/resources/js/components/ui/table.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 
 import { IconChevronLgDown, IconHamburger } from 'justd-icons';
diff --git a/resources/js/components/ui/text-field.tsx b/resources/js/components/ui/text-field.tsx
index 741de4d..208d646 100644
--- a/resources/js/components/ui/text-field.tsx
+++ b/resources/js/components/ui/text-field.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 
 import type { TextInputDOMProps } from '@react-types/shared';
diff --git a/resources/js/components/ui/toast.tsx b/resources/js/components/ui/toast.tsx
index 9204e52..1fba629 100644
--- a/resources/js/components/ui/toast.tsx
+++ b/resources/js/components/ui/toast.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useTheme } from '@/components/theme-provider';
 import { cn } from '@/utils/classes';
 import {
diff --git a/resources/js/components/ui/visually-hidden.tsx b/resources/js/components/ui/visually-hidden.tsx
index 279455c..d0cd4a0 100644
--- a/resources/js/components/ui/visually-hidden.tsx
+++ b/resources/js/components/ui/visually-hidden.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useVisuallyHidden } from 'react-aria';
 
 type VisuallyHiddenSpanProps = {