diff --git a/app/blocks/navbar/app-navbar.tsx b/app/blocks/navbar/app-navbar.tsx
index 78eee5ec..78e09675 100644
--- a/app/blocks/navbar/app-navbar.tsx
+++ b/app/blocks/navbar/app-navbar.tsx
@@ -30,7 +30,7 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na
       <Navbar {...props}>
         <Navbar.Nav>
           <Navbar.Logo href="/docs/components/layouts/navbar">
-            <IconBrandApple className="size-5" />
+            <IconBrandApple className="size-6 lg:size-5" />
           </Navbar.Logo>
           <Navbar.Section>
             <NavbarItem isCurrent href="/blocks/navbar/navbar-01">
@@ -58,7 +58,7 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na
             <Navbar.Item href="#">Accessories</Navbar.Item>
             <Navbar.Item href="#">Support</Navbar.Item>
           </Navbar.Section>
-          <Navbar.Section className="ml-auto hidden sm:flex">
+          <Navbar.Section className="ml-auto hidden lg:flex">
             <Navbar.Flex>
               <Button
                 onPress={() => setOpen(true)}
@@ -123,7 +123,7 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na
         <Navbar.Compact>
           <Navbar.Flex>
             <Navbar.Trigger className="-ml-2" />
-            <Separator orientation="vertical" className="h-6 mx-2" />
+            <Separator orientation="vertical" className="h-6 lg:mx-1" />
             <Navbar.Logo href="/docs/components/layouts/navbar">
               <IconBrandApple className="size-5" />
             </Navbar.Logo>
diff --git a/components/docs/layouts/navbar/navbar-basic-demo.tsx b/components/docs/layouts/navbar/navbar-basic-demo.tsx
index 3f6cc562..c03da5f3 100644
--- a/components/docs/layouts/navbar/navbar-basic-demo.tsx
+++ b/components/docs/layouts/navbar/navbar-basic-demo.tsx
@@ -26,7 +26,7 @@ export default function NavbarBasicDemo() {
           <Navbar.Item href="#">iPad</Navbar.Item>
           <Navbar.Item href="#">iPhone</Navbar.Item>
         </Navbar.Section>
-        <Navbar.Section className="ml-auto hidden sm:flex">
+        <Navbar.Section className="ml-auto hidden lg:flex">
           <div className="flex items-center gap-x-2">
             <Button appearance="plain" size="square-petite" aria-label="Search for products">
               <IconSearch />
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index f57a93d4..1500b67a 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -47,7 +47,7 @@ const navbarStyles = tv({
   base: "relative isolate flex w-full min-h-svh flex-col",
   variants: {
     intent: {
-      floating: "pt-2 px-2",
+      floating: "pt-2 px-2.5",
       navbar: "",
       inset: "bg-secondary dark:bg-bg"
     }
@@ -65,7 +65,7 @@ const Navbar = ({
   intent = "navbar",
   ...props
 }: NavbarProviderProps) => {
-  const isCompact = useMediaQuery("(max-width: 600px)")
+  const isCompact = useMediaQuery("(max-width: 1023px)")
   const [_open, _setOpen] = React.useState(defaultOpen)
   const open = openProp ?? _open
 
@@ -146,7 +146,7 @@ const Nav = ({ className, ...props }: NavbarProps) => {
           }}
           isStack={intent === "floating"}
         >
-          <Sheet.Body className="px-2">{props.children}</Sheet.Body>
+          <Sheet.Body className="sm:px-4 px-2">{props.children}</Sheet.Body>
         </Sheet.Content>
       </Sheet>
     )
@@ -181,7 +181,7 @@ const Trigger = ({ className, onPress, ...props }: React.ComponentProps<typeof B
 }
 
 const Section = ({ className, ...props }: React.ComponentProps<"div">) => {
-  const isCompact = useMediaQuery("(max-width: 600px)")
+  const { isCompact } = useNavbar()
   const id = React.useId()
   return (
     <LayoutGroup id={id}>
@@ -202,7 +202,7 @@ const Section = ({ className, ...props }: React.ComponentProps<"div">) => {
 
 const navItemStyles = tv({
   base: [
-    "relative text-sm px-2 flex items-center gap-x-2 [&>[data-slot=icon]]:-mx-0.5 text-muted-fg outline-none forced-colors:disabled:text-[GrayText] transition-colors",
+    "relative lg:text-sm px-2 flex items-center gap-x-2 [&>[data-slot=icon]]:-mx-0.5 text-muted-fg outline-none forced-colors:disabled:text-[GrayText] transition-colors",
     "hover:text-fg focus:text-fg pressed:text-fg focus-visible:outline-1 focus-visible:outline-primary",
     "disabled:opacity-60 disabled:cursor-default",
     "[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0"
@@ -258,7 +258,7 @@ const Logo = ({ className, ...props }: LinkProps) => {
 }
 
 const Flex = ({ className, ...props }: React.ComponentProps<"div">) => {
-  return <div className={cn("flex items-center gap-3", className)} {...props} />
+  return <div className={cn("flex items-center gap-2 sm:gap-3", className)} {...props} />
 }
 
 const compactStyles = tv({
diff --git a/resources/content/docs/prologue/release-notes.mdx b/resources/content/docs/prologue/release-notes.mdx
index b03e5d16..2d43daab 100644
--- a/resources/content/docs/prologue/release-notes.mdx
+++ b/resources/content/docs/prologue/release-notes.mdx
@@ -11,6 +11,12 @@ If you don't see the release you're looking for, please run `npx justd-cli@lates
 ## 2024
 This all changes are made on the 2024 release.
 
+## October 27
+- Fix Navbar Media Query
+- Fix SearchField
+- Fix TextField
+- Fix ColorField
+
 ## October 24
 - Significant improvements to [Breadcrumbs](/docs/components/navigation/breadcrumbs)
 - Fix Navbar Props