diff --git a/app/blocks/navbar/app-navbar.tsx b/app/blocks/navbar/app-navbar.tsx
index bcb9093e..78eee5ec 100644
--- a/app/blocks/navbar/app-navbar.tsx
+++ b/app/blocks/navbar/app-navbar.tsx
@@ -1,5 +1,8 @@
 "use client"
 
+import * as React from "react"
+
+import { CommandPalette } from "@/components/command-palette"
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import {
   IconBag2,
@@ -20,162 +23,171 @@ import { Avatar, Button, Menu, Navbar, Separator } from "ui"
 
 export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
   const isUsingIcon = usePathname().includes("navbar-05")
+  const [open, setOpen] = React.useState(false)
   return (
-    <Navbar {...props}>
-      <Navbar.Nav>
-        <Navbar.Logo href="/docs/components/layouts/navbar">
-          <IconBrandApple className="size-5" />
-        </Navbar.Logo>
-        <Navbar.Section>
-          <NavbarItem isCurrent href="/blocks/navbar/navbar-01">
-            {isUsingIcon && <IconBasket />}
-            Store
-          </NavbarItem>
-          <NavbarItem href="/blocks/navbar/navbar-02">
-            {isUsingIcon && <IconMacbook />}
-            Mac
-          </NavbarItem>
-          <NavbarItem href="/blocks/navbar/navbar-03">
-            {isUsingIcon && <IconCube />}
-            iPad
-          </NavbarItem>
-          <NavbarItem href="/blocks/navbar/navbar-04">
-            {isUsingIcon && <IconCube />}
-            iPhone
-          </NavbarItem>
-          <NavbarItem href="/blocks/navbar/navbar-05">
-            {isUsingIcon && <IconCube />}
-            Watch
-          </NavbarItem>
-          <NavbarItem href="#">Vision</NavbarItem>
-          <Navbar.Item href="#">Entertainment</Navbar.Item>
-          <Navbar.Item href="#">Accessories</Navbar.Item>
-          <Navbar.Item href="#">Support</Navbar.Item>
-        </Navbar.Section>
-        <Navbar.Section className="ml-auto hidden sm:flex">
-          <Navbar.Flex>
-            <Button appearance="plain" size="square-petite" aria-label="Search for products">
-              <IconSearch />
-            </Button>
-            <Button appearance="plain" size="square-petite" aria-label="Your Bag">
-              <IconBag2 />
-            </Button>
-            <ThemeSwitcher appearance="plain" />
-          </Navbar.Flex>
-          <Separator orientation="vertical" className="h-6 ml-1 mr-3" />
-          <Menu>
-            <Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
-              <Avatar
-                alt="slash"
-                size="small"
-                shape="square"
-                src="/images/sidebar/profile-slash.jpg"
-              />
-              <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
-            </Menu.Trigger>
-            <Menu.Content placement="bottom" showArrow className="sm:min-w-56">
-              <Menu.Section>
-                <Menu.Header separator>
-                  <span className="block">Irsyad A. Panjaitan</span>
-                  <span className="font-normal text-muted-fg">@irsyadadl</span>
-                </Menu.Header>
-              </Menu.Section>
-
-              <Menu.Item href="#dashboard">
-                <IconDashboard />
-                Dashboard
-              </Menu.Item>
-              <Menu.Item href="#settings">
-                <IconSettings />
-                Settings
-              </Menu.Item>
-              <Menu.Separator />
-              <Menu.Item>
-                <IconCommandRegular />
-                Command Menu
-              </Menu.Item>
-              <Menu.Separator />
-              <Menu.Item href="#contact-s">
-                <IconHeadphones />
-                Contact Support
-              </Menu.Item>
-              <Menu.Separator />
-              <Menu.Item href="#logout">
-                <IconLogout />
-                Log out
-              </Menu.Item>
-            </Menu.Content>
-          </Menu>
-        </Navbar.Section>
-      </Navbar.Nav>
-
-      <Navbar.Compact>
-        <Navbar.Flex>
-          <Navbar.Trigger className="-ml-2" />
-          <Separator orientation="vertical" className="h-6 mx-2" />
+    <>
+      <CommandPalette setOpen={setOpen} openCmd={open} />
+      <Navbar {...props}>
+        <Navbar.Nav>
           <Navbar.Logo href="/docs/components/layouts/navbar">
             <IconBrandApple className="size-5" />
           </Navbar.Logo>
-        </Navbar.Flex>
-        <Navbar.Flex>
+          <Navbar.Section>
+            <NavbarItem isCurrent href="/blocks/navbar/navbar-01">
+              {isUsingIcon && <IconBasket />}
+              Store
+            </NavbarItem>
+            <NavbarItem href="/blocks/navbar/navbar-02">
+              {isUsingIcon && <IconMacbook />}
+              Mac
+            </NavbarItem>
+            <NavbarItem href="/blocks/navbar/navbar-03">
+              {isUsingIcon && <IconCube />}
+              iPad
+            </NavbarItem>
+            <NavbarItem href="/blocks/navbar/navbar-04">
+              {isUsingIcon && <IconCube />}
+              iPhone
+            </NavbarItem>
+            <NavbarItem href="/blocks/navbar/navbar-05">
+              {isUsingIcon && <IconCube />}
+              Watch
+            </NavbarItem>
+            <NavbarItem href="#">Vision</NavbarItem>
+            <Navbar.Item href="#">Entertainment</Navbar.Item>
+            <Navbar.Item href="#">Accessories</Navbar.Item>
+            <Navbar.Item href="#">Support</Navbar.Item>
+          </Navbar.Section>
+          <Navbar.Section className="ml-auto hidden sm:flex">
+            <Navbar.Flex>
+              <Button
+                onPress={() => setOpen(true)}
+                appearance="plain"
+                size="square-petite"
+                aria-label="Search for products"
+              >
+                <IconSearch />
+              </Button>
+              <Button appearance="plain" size="square-petite" aria-label="Your Bag">
+                <IconBag2 />
+              </Button>
+              <ThemeSwitcher appearance="plain" />
+            </Navbar.Flex>
+            <Separator orientation="vertical" className="h-6 ml-1 mr-3" />
+            <Menu>
+              <Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
+                <Avatar
+                  alt="slash"
+                  size="small"
+                  shape="square"
+                  src="/images/sidebar/profile-slash.jpg"
+                />
+                <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
+              </Menu.Trigger>
+              <Menu.Content placement="bottom" showArrow className="sm:min-w-56">
+                <Menu.Section>
+                  <Menu.Header separator>
+                    <span className="block">Irsyad A. Panjaitan</span>
+                    <span className="font-normal text-muted-fg">@irsyadadl</span>
+                  </Menu.Header>
+                </Menu.Section>
+
+                <Menu.Item href="#dashboard">
+                  <IconDashboard />
+                  Dashboard
+                </Menu.Item>
+                <Menu.Item href="#settings">
+                  <IconSettings />
+                  Settings
+                </Menu.Item>
+                <Menu.Separator />
+                <Menu.Item>
+                  <IconCommandRegular />
+                  Command Menu
+                </Menu.Item>
+                <Menu.Separator />
+                <Menu.Item href="#contact-s">
+                  <IconHeadphones />
+                  Contact Support
+                </Menu.Item>
+                <Menu.Separator />
+                <Menu.Item href="#logout">
+                  <IconLogout />
+                  Log out
+                </Menu.Item>
+              </Menu.Content>
+            </Menu>
+          </Navbar.Section>
+        </Navbar.Nav>
+
+        <Navbar.Compact>
           <Navbar.Flex>
-            <Button appearance="plain" size="square-petite" aria-label="Search for products">
-              <IconSearch />
-            </Button>
-            <Button appearance="plain" size="square-petite" aria-label="Your Bag">
-              <IconBag2 />
-            </Button>
-            <ThemeSwitcher appearance="plain" />
+            <Navbar.Trigger className="-ml-2" />
+            <Separator orientation="vertical" className="h-6 mx-2" />
+            <Navbar.Logo href="/docs/components/layouts/navbar">
+              <IconBrandApple className="size-5" />
+            </Navbar.Logo>
           </Navbar.Flex>
-          <Separator orientation="vertical" className="h-6 ml-1 mr-3" />
-          <Menu>
-            <Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
-              <Avatar
-                alt="slash"
-                size="small"
-                shape="square"
-                src="/images/sidebar/profile-slash.jpg"
-              />
-              <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
-            </Menu.Trigger>
-            <Menu.Content placement="bottom" showArrow className="sm:min-w-56">
-              <Menu.Section>
-                <Menu.Header separator>
-                  <span className="block">Irsyad A. Panjaitan</span>
-                  <span className="font-normal text-muted-fg">@irsyadadl</span>
-                </Menu.Header>
-              </Menu.Section>
+          <Navbar.Flex>
+            <Navbar.Flex>
+              <Button appearance="plain" size="square-petite" aria-label="Search for products">
+                <IconSearch />
+              </Button>
+              <Button appearance="plain" size="square-petite" aria-label="Your Bag">
+                <IconBag2 />
+              </Button>
+              <ThemeSwitcher appearance="plain" />
+            </Navbar.Flex>
+            <Separator orientation="vertical" className="h-6 ml-1 mr-3" />
+            <Menu>
+              <Menu.Trigger aria-label="Open Menu" className="group gap-x-2 flex items-center">
+                <Avatar
+                  alt="slash"
+                  size="small"
+                  shape="square"
+                  src="/images/sidebar/profile-slash.jpg"
+                />
+                <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
+              </Menu.Trigger>
+              <Menu.Content placement="bottom" showArrow className="sm:min-w-56">
+                <Menu.Section>
+                  <Menu.Header separator>
+                    <span className="block">Irsyad A. Panjaitan</span>
+                    <span className="font-normal text-muted-fg">@irsyadadl</span>
+                  </Menu.Header>
+                </Menu.Section>
 
-              <Menu.Item href="#dashboard">
-                <IconDashboard />
-                Dashboard
-              </Menu.Item>
-              <Menu.Item href="#settings">
-                <IconSettings />
-                Settings
-              </Menu.Item>
-              <Menu.Separator />
-              <Menu.Item>
-                <IconCommandRegular />
-                Command Menu
-              </Menu.Item>
-              <Menu.Separator />
-              <Menu.Item href="#contact-s">
-                <IconHeadphones />
-                Contact Support
-              </Menu.Item>
-              <Menu.Separator />
-              <Menu.Item href="#logout">
-                <IconLogout />
-                Log out
-              </Menu.Item>
-            </Menu.Content>
-          </Menu>
-        </Navbar.Flex>
-      </Navbar.Compact>
+                <Menu.Item href="#dashboard">
+                  <IconDashboard />
+                  Dashboard
+                </Menu.Item>
+                <Menu.Item href="#settings">
+                  <IconSettings />
+                  Settings
+                </Menu.Item>
+                <Menu.Separator />
+                <Menu.Item>
+                  <IconCommandRegular />
+                  Command Menu
+                </Menu.Item>
+                <Menu.Separator />
+                <Menu.Item href="#contact-s">
+                  <IconHeadphones />
+                  Contact Support
+                </Menu.Item>
+                <Menu.Separator />
+                <Menu.Item href="#logout">
+                  <IconLogout />
+                  Log out
+                </Menu.Item>
+              </Menu.Content>
+            </Menu>
+          </Navbar.Flex>
+        </Navbar.Compact>
 
-      <Navbar.Inset>{children}</Navbar.Inset>
-    </Navbar>
+        <Navbar.Inset>{children}</Navbar.Inset>
+      </Navbar>
+    </>
   )
 }
 
diff --git a/app/blocks/sidebar/sidebar-02/layout.tsx b/app/blocks/sidebar/sidebar-02/layout.tsx
index 12b0f76c..c71b99a2 100644
--- a/app/blocks/sidebar/sidebar-02/layout.tsx
+++ b/app/blocks/sidebar/sidebar-02/layout.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 
 import { AppSidebar } from "@/app/blocks/sidebar/app-sidebar"
+import { CommandPalette } from "@/components/command-palette"
 import {
   IconChevronLgDown,
   IconCirclePerson,
@@ -14,53 +15,58 @@ import {
 import { Avatar, Breadcrumbs, Button, Menu, Separator, Sidebar } from "ui"
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false)
   return (
-    <Sidebar.Provider>
-      <AppSidebar collapsible="dock" intent="inset" />
-      <Sidebar.Inset>
-        <header className="sticky justify-between sm:justify-start top-0 h-[3.57rem] px-4 flex items-center gap-x-2">
-          <span className="flex items-center gap-x-4">
-            <Sidebar.Trigger className="-mx-2" />
-            <Separator className="h-6 md:block hidden" orientation="vertical" />
+    <>
+      <CommandPalette setOpen={setOpen} openCmd={open} />
 
-            <Breadcrumbs className="md:flex hidden">
-              <Breadcrumbs.Item href="/blocks/sidebar/sidebar-01">Dashboard</Breadcrumbs.Item>
+      <Sidebar.Provider>
+        <AppSidebar collapsible="dock" intent="inset" />
+        <Sidebar.Inset>
+          <header className="sticky justify-between sm:justify-start top-0 h-[3.57rem] px-4 flex items-center gap-x-2">
+            <span className="flex items-center gap-x-4">
+              <Sidebar.Trigger className="-mx-2" />
+              <Separator className="h-6 md:block hidden" orientation="vertical" />
 
-              <Breadcrumbs.Item>Settings</Breadcrumbs.Item>
-            </Breadcrumbs>
-          </span>
-          <div className="flex sm:hidden items-center gap-x-2">
-            <Button appearance="plain" aria-label="Search..." size="square-petite">
-              <IconSearch />
-            </Button>
-            <Menu>
-              <Menu.Trigger aria-label="Profile" className="flex items-center gap-x-2 group">
-                <Avatar size="small" shape="circle" src="/images/sidebar/profile-slash.jpg" />
-                <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
-              </Menu.Trigger>
-              <Menu.Content className="min-w-[--trigger-width]">
-                <Menu.Item href="#">
-                  <IconCirclePerson />
-                  Profile
-                </Menu.Item>
-                <Menu.Item href="#">
-                  <IconSettings />
-                  Settings
-                </Menu.Item>
-                <Menu.Item href="#">
-                  <IconShield />
-                  Security
-                </Menu.Item>
-                <Menu.Item href="#">
-                  <IconLogout />
-                  Log out
-                </Menu.Item>
-              </Menu.Content>
-            </Menu>
-          </div>
-        </header>
-        <div className="p-4 lg:p-6">{children}</div>
-      </Sidebar.Inset>
-    </Sidebar.Provider>
+              <Breadcrumbs className="md:flex hidden">
+                <Breadcrumbs.Item href="/blocks/sidebar/sidebar-01">Dashboard</Breadcrumbs.Item>
+
+                <Breadcrumbs.Item>Settings</Breadcrumbs.Item>
+              </Breadcrumbs>
+            </span>
+            <div className="flex sm:hidden items-center gap-x-2">
+              <Button appearance="plain" aria-label="Search..." size="square-petite">
+                <IconSearch />
+              </Button>
+              <Menu>
+                <Menu.Trigger aria-label="Profile" className="flex items-center gap-x-2 group">
+                  <Avatar size="small" shape="circle" src="/images/sidebar/profile-slash.jpg" />
+                  <IconChevronLgDown className="size-4 group-pressed:rotate-180 transition-transform" />
+                </Menu.Trigger>
+                <Menu.Content className="min-w-[--trigger-width]">
+                  <Menu.Item href="#">
+                    <IconCirclePerson />
+                    Profile
+                  </Menu.Item>
+                  <Menu.Item href="#">
+                    <IconSettings />
+                    Settings
+                  </Menu.Item>
+                  <Menu.Item href="#">
+                    <IconShield />
+                    Security
+                  </Menu.Item>
+                  <Menu.Item href="#">
+                    <IconLogout />
+                    Log out
+                  </Menu.Item>
+                </Menu.Content>
+              </Menu>
+            </div>
+          </header>
+          <div className="p-4 lg:p-6">{children}</div>
+        </Sidebar.Inset>
+      </Sidebar.Provider>
+    </>
   )
 }
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index 602a6ade..beeddf5b 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -45,7 +45,7 @@ const fieldGroupPrefixStyles = tv({
     "flex group-invalid:border-danger group-disabled:bg-secondary group-disabled:opacity-50 items-center group-invalid:focus-within:ring-danger/20",
     "has-[[data-slot=prefix]]:-mx-0.5 has-[[data-slot=suffix]]:-mx-0.5",
     "[&_button]:h-8 [&_button]:rounded-md [&_button]:px-2.5 [&_button]:before:rounded-[calc(theme(borderRadius.md)-1px)] [&_button]:after:rounded-[calc(theme(borderRadius.md)-1px)] dark:[&_button]:after:rounded-md",
-    "[&>[data-slot=prefix]]:ml-2.5 [&>[data-slot=prefix]]:text-muted-fg [&>[data-slot=prefix]>button]:ml-[-7px]",
+    "[&>[role=progressbar]]:mr-2.5 [&>[data-slot=prefix]]:ml-2.5 [&>[data-slot=prefix]]:text-muted-fg [&>[data-slot=prefix]>button]:ml-[-7px]",
     "[&>[data-slot=suffix]]:mr-2.5 [&>[data-slot=suffix]]:text-muted-fg [&>[data-slot=suffix]>button]:mr-[-7px]"
   ]
 })
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index b4c6f629..f57a93d4 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -82,7 +82,7 @@ const Navbar = ({
 
   const toggleNavbar = React.useCallback(() => {
     setOpen((open) => !open)
-  }, [isCompact, setOpen])
+  }, [setOpen])
 
   const contextValue = React.useMemo<NavbarContextProps>(
     () => ({
diff --git a/components/ui/text-field.tsx b/components/ui/text-field.tsx
index f144ae2e..26263ba9 100644
--- a/components/ui/text-field.tsx
+++ b/components/ui/text-field.tsx
@@ -69,7 +69,7 @@ const TextField = ({
         className={fieldGroupPrefixStyles({ className })}
       >
         {isPending && indicatorPlace === "prefix" ? (
-          <Loader data-slot="prefix" variant="spin" />
+          <Loader variant="spin" />
         ) : prefix ? (
           <span data-slot="prefix" className="atrs x2e2">
             {prefix}