diff --git a/apps/admin-panel/app/command-menu.tsx b/apps/admin-panel/app/command-menu.tsx
new file mode 100644
index 000000000..8e3530862
--- /dev/null
+++ b/apps/admin-panel/app/command-menu.tsx
@@ -0,0 +1,360 @@
+"use client"
+
+import React from "react"
+import { usePathname, useRouter } from "next/navigation"
+import { HiPlus } from "react-icons/hi"
+
+import { CreateCustomerDialog } from "./customers/create"
+import { CreateDepositDialog } from "./deposits/create"
+import { WithdrawalInitiateDialog } from "./withdrawals/initiate"
+import { CreateCreditFacilityDialog } from "./credit-facilities/create"
+import { CreditFacilityPartialPaymentDialog } from "./credit-facilities/partial-payment"
+import { CreateUserDialog } from "./users/create"
+import { CreateTermsTemplateDialog } from "./terms-templates/create"
+import { CreateCommitteeDialog } from "./committees/create"
+import { CreditFacilityDisbursalInitiateDialog } from "./disbursals/create"
+
+import { PATH_CONFIGS, useCreateContext } from "./create"
+
+import {
+  navDashboardItems,
+  navLoansItems,
+  navCustomersItems,
+  navTransactionItems,
+  navAdminItems,
+  navFinanceItems,
+} from "@/components/app-sidebar/nav-items"
+
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/ui/command"
+import { CreditFacilityStatus } from "@/lib/graphql/generated"
+
+const isItemAllowedOnCurrentPath = (
+  allowedPaths: (string | RegExp)[],
+  currentPath: string,
+) => {
+  return allowedPaths.some((path) => {
+    if (typeof path === "string") {
+      return path === currentPath
+    } else if (path instanceof RegExp) {
+      return path.test(currentPath)
+    }
+    return false
+  })
+}
+
+const allNavItems = [
+  ...navDashboardItems,
+  ...navLoansItems,
+  ...navCustomersItems,
+  ...navTransactionItems,
+  ...navAdminItems,
+  ...navFinanceItems,
+]
+
+const CommandMenu = () => {
+  const router = useRouter()
+  const pathName = usePathname()
+
+  const [open, setOpen] = React.useState(false)
+  const [pages, setPages] = React.useState<"main" | "navigation">("main")
+
+  const [createCustomer, setCreateCustomer] = React.useState(false)
+  const [createDeposit, setCreateDeposit] = React.useState(false)
+  const [createWithdrawal, setCreateWithdrawal] = React.useState(false)
+  const [createFacility, setCreateFacility] = React.useState(false)
+  const [initiateDisbursal, setInitiateDisbursal] = React.useState(false)
+  const [makePayment, setMakePayment] = React.useState(false)
+  const [openCreateUserDialog, setOpenCreateUserDialog] = React.useState(false)
+  const [openCreateTermsTemplateDialog, setOpenCreateTermsTemplateDialog] =
+    React.useState(false)
+  const [openCreateCommitteeDialog, setOpenCreateCommitteeDialog] = React.useState(false)
+
+  const { customer, facility, setCustomer } = useCreateContext()
+
+  const userIsInCustomerDetailsPage = Boolean(pathName.match(/^\/customers\/.+$/))
+  const setCustomerToNullIfNotInCustomerDetails = () => {
+    if (!userIsInCustomerDetailsPage) setCustomer(null)
+  }
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setPages("main")
+        setOpen((open) => !open)
+      }
+      if (e.shiftKey && e.key === "N") {
+        const activeElement = document.activeElement?.tagName?.toLowerCase()
+        const ignoredElements = ["input", "textarea", "select"]
+        if (activeElement && !ignoredElements.includes(activeElement)) {
+          e.preventDefault()
+          setOpen((open) => !open)
+          setPages("navigation")
+        }
+      }
+    }
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  const menuItems = [
+    {
+      label: "Create Deposit",
+      icon: HiPlus,
+      action: () => {
+        if (!customer) return
+        setCreateDeposit(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.CUSTOMER_DETAILS],
+    },
+    {
+      label: "Create Withdrawal",
+      icon: HiPlus,
+      action: () => {
+        if (!customer) return
+        setCreateWithdrawal(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.CUSTOMER_DETAILS],
+    },
+    {
+      label: "Create Customer",
+      icon: HiPlus,
+      action: () => {
+        setCreateCustomer(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.CUSTOMERS, PATH_CONFIGS.CUSTOMER_DETAILS],
+    },
+    {
+      label: "Create Credit Facility",
+      icon: HiPlus,
+      action: () => {
+        if (!customer) return
+        setCreateFacility(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.CUSTOMER_DETAILS],
+    },
+    {
+      label: "Create Disbursal",
+      icon: HiPlus,
+      action: () => {
+        if (!facility) return
+        setInitiateDisbursal(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.CREDIT_FACILITY_DETAILS],
+      condition: () => facility?.status === CreditFacilityStatus.Active,
+    },
+    {
+      label: "Make Payment",
+      icon: HiPlus,
+      action: () => {
+        if (!facility) return
+        setMakePayment(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.CREDIT_FACILITY_DETAILS],
+      condition: () => facility?.status === CreditFacilityStatus.Active,
+    },
+    {
+      label: "Create User",
+      icon: HiPlus,
+      action: () => {
+        setOpenCreateUserDialog(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.USERS, PATH_CONFIGS.USER_DETAILS],
+    },
+    {
+      label: "Create Terms Template",
+      icon: HiPlus,
+      action: () => {
+        setOpenCreateTermsTemplateDialog(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.TERMS_TEMPLATES, PATH_CONFIGS.TERMS_TEMPLATE_DETAILS],
+    },
+    {
+      label: "Create Committee",
+      icon: HiPlus,
+      action: () => {
+        setOpenCreateCommitteeDialog(true)
+        setOpen(false)
+      },
+      allowedPaths: [PATH_CONFIGS.COMMITTEES, PATH_CONFIGS.COMMITTEE_DETAILS],
+    },
+  ]
+
+  const availableItems = menuItems.filter((item) =>
+    isItemAllowedOnCurrentPath(item.allowedPaths, pathName),
+  )
+
+  return (
+    <>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command className="rounded-lg border shadow-md">
+          <CommandInput
+            placeholder={
+              pages === "navigation" ? "Search navigation..." : "What do you need?"
+            }
+          />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+
+            {pages === "main" ? (
+              <>
+                {availableItems.length > 0 && (
+                  <>
+                    <CommandSeparator />
+                    <CommandGroup heading="Available Actions">
+                      {availableItems.map((item) => (
+                        <CommandItem
+                          key={item.label}
+                          disabled={item.condition && !item.condition()}
+                          onSelect={() => {
+                            item.action()
+                          }}
+                        >
+                          <item.icon className="mr-2 h-4 w-4" />
+                          {item.label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </>
+                )}
+
+                <CommandSeparator />
+
+                <CommandGroup
+                  heading={
+                    <div className="flex items-center justify-between">
+                      <span>Navigation</span>
+                      <kbd className="ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+                        <span className="text-xs">Shift +</span>N
+                      </kbd>
+                    </div>
+                  }
+                >
+                  {allNavItems.map((item) => (
+                    <CommandItem
+                      key={item.url}
+                      onSelect={() => {
+                        router.push(item.url)
+                        setOpen(false)
+                      }}
+                      className="flex items-center gap-2"
+                    >
+                      <item.icon className="h-4 w-4" />
+                      <span>{item.title}</span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            ) : (
+              <CommandGroup heading="Navigation">
+                {allNavItems.map((item) => (
+                  <CommandItem
+                    key={item.url}
+                    onSelect={() => {
+                      setOpen(false)
+                      router.push(item.url)
+                    }}
+                    className="flex items-center gap-2"
+                  >
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.title}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+
+      <CreateCustomerDialog
+        openCreateCustomerDialog={createCustomer}
+        setOpenCreateCustomerDialog={setCreateCustomer}
+      />
+
+      <CreateUserDialog
+        openCreateUserDialog={openCreateUserDialog}
+        setOpenCreateUserDialog={setOpenCreateUserDialog}
+      />
+
+      <CreateTermsTemplateDialog
+        openCreateTermsTemplateDialog={openCreateTermsTemplateDialog}
+        setOpenCreateTermsTemplateDialog={setOpenCreateTermsTemplateDialog}
+      />
+
+      <CreateCommitteeDialog
+        openCreateCommitteeDialog={openCreateCommitteeDialog}
+        setOpenCreateCommitteeDialog={setOpenCreateCommitteeDialog}
+      />
+
+      {customer && (
+        <>
+          <CreateDepositDialog
+            openCreateDepositDialog={createDeposit}
+            setOpenCreateDepositDialog={() => {
+              setCustomerToNullIfNotInCustomerDetails()
+              setCreateDeposit(false)
+            }}
+            depositAccountId={customer.depositAccount.depositAccountId}
+          />
+
+          <WithdrawalInitiateDialog
+            openWithdrawalInitiateDialog={createWithdrawal}
+            setOpenWithdrawalInitiateDialog={() => {
+              setCustomerToNullIfNotInCustomerDetails()
+              setCreateWithdrawal(false)
+            }}
+            depositAccountId={customer.depositAccount.depositAccountId}
+          />
+
+          <CreateCreditFacilityDialog
+            openCreateCreditFacilityDialog={createFacility}
+            setOpenCreateCreditFacilityDialog={() => {
+              setCustomerToNullIfNotInCustomerDetails()
+              setCreateFacility(false)
+            }}
+            customerId={customer.customerId}
+          />
+        </>
+      )}
+
+      {facility && (
+        <>
+          <CreditFacilityDisbursalInitiateDialog
+            creditFacilityId={facility.creditFacilityId}
+            openDialog={initiateDisbursal}
+            setOpenDialog={() => {
+              setInitiateDisbursal(false)
+            }}
+          />
+
+          <CreditFacilityPartialPaymentDialog
+            creditFacilityId={facility.creditFacilityId}
+            openDialog={makePayment}
+            setOpenDialog={() => {
+              setMakePayment(false)
+            }}
+          />
+        </>
+      )}
+    </>
+  )
+}
+
+export { CommandMenu }
diff --git a/apps/admin-panel/app/create.tsx b/apps/admin-panel/app/create.tsx
index b550a613f..83373b1d5 100644
--- a/apps/admin-panel/app/create.tsx
+++ b/apps/admin-panel/app/create.tsx
@@ -98,7 +98,7 @@ const CreateButton = () => {
   }
 
   const isButtonDisabled = () => {
-    if (pathName.includes("credit-facilities")) {
+    if (PATH_CONFIGS.CREDIT_FACILITY_DETAILS.test(pathName)) {
       return !facility || facility.status !== CreditFacilityStatus.Active
     }
     return false
@@ -225,7 +225,11 @@ const CreateButton = () => {
                 }}
               >
                 <DropdownMenuTrigger asChild>
-                  <Button data-testid="global-create-button" disabled={disabled}>
+                  <Button
+                    data-testid="global-create-button"
+                    disabled={disabled}
+                    tabIndex={-1}
+                  >
                     <HiPlus className="h-4 w-4" />
                     Create
                   </Button>
diff --git a/apps/admin-panel/app/credit-facilities/[credit-facility-id]/layout.tsx b/apps/admin-panel/app/credit-facilities/[credit-facility-id]/layout.tsx
index b9496fb07..7b913477f 100644
--- a/apps/admin-panel/app/credit-facilities/[credit-facility-id]/layout.tsx
+++ b/apps/admin-panel/app/credit-facilities/[credit-facility-id]/layout.tsx
@@ -55,10 +55,10 @@ gql`
 `
 
 const TABS = [
-  { url: "/", tabLabel: "Overview" },
-  { url: "/terms", tabLabel: "Terms" },
-  { url: "/transactions", tabLabel: "Transactions" },
-  { url: "/disbursals", tabLabel: "Disbursals" },
+  { id: "1", url: "/", tabLabel: "Overview" },
+  { id: "2", url: "/terms", tabLabel: "Terms" },
+  { id: "3", url: "/transactions", tabLabel: "Transactions" },
+  { id: "4", url: "/disbursals", tabLabel: "Disbursals" },
 ]
 
 export default function CreditFacilityLayout({
@@ -144,7 +144,12 @@ export default function CreditFacilityLayout({
         creditFacilityDetails={data.creditFacility}
         refetch={refetch}
       />
-      <Tabs value={currentTab} onValueChange={handleTabChange} className="mt-2">
+      <Tabs
+        defaultValue={TABS[0].url}
+        value={currentTab}
+        onValueChange={handleTabChange}
+        className="mt-2"
+      >
         <TabsList>
           {TABS.map((tab) => (
             <TabsTrigger key={tab.url} value={tab.url}>
diff --git a/apps/admin-panel/app/credit-facilities/create.tsx b/apps/admin-panel/app/credit-facilities/create.tsx
index edc16fd79..e61f1f86a 100644
--- a/apps/admin-panel/app/credit-facilities/create.tsx
+++ b/apps/admin-panel/app/credit-facilities/create.tsx
@@ -359,13 +359,14 @@ export const CreateCreditFacilityDialog: React.FC<CreateCreditFacilityDialogProp
           )}
           {useTemplateTerms ? (
             <>
-              <div
+              <button
+                type="button"
                 onClick={() => setUseTemplateTerms(false)}
                 className="mt-2 flex items-center space-x-2 ml-2 cursor-pointer text-sm hover:underline w-fit"
               >
                 <div>Credit Facility Terms</div>
                 <PiPencilSimpleLineLight className="w-5 h-5 cursor-pointer text-primary" />
-              </div>
+              </button>
               <DetailsGroup
                 layout="horizontal"
                 className="grid auto-rows-fr sm:grid-cols-2"
diff --git a/apps/admin-panel/app/customers/[customer-id]/details.tsx b/apps/admin-panel/app/customers/[customer-id]/details.tsx
index f1bfcd1da..d3adeb039 100644
--- a/apps/admin-panel/app/customers/[customer-id]/details.tsx
+++ b/apps/admin-panel/app/customers/[customer-id]/details.tsx
@@ -23,13 +23,14 @@ export const CustomerDetailsCard: React.FC<CustomerDetailsCardProps> = ({ custom
     {
       label: "Telegram",
       value: (
-        <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="flex items-center gap-2"
+          onClick={() => setOpenUpdateTelegramIdDialog(true)}
+        >
           {customer.telegramId}
-          <PiPencilSimpleLineLight
-            onClick={() => setOpenUpdateTelegramIdDialog(true)}
-            className="w-5 h-5 cursor-pointer text-primary"
-          />
-        </div>
+          <PiPencilSimpleLineLight className="w-5 h-5 cursor-pointer text-primary" />
+        </button>
       ),
     },
     {
diff --git a/apps/admin-panel/app/customers/[customer-id]/layout.tsx b/apps/admin-panel/app/customers/[customer-id]/layout.tsx
index 7da56b283..e75359275 100644
--- a/apps/admin-panel/app/customers/[customer-id]/layout.tsx
+++ b/apps/admin-panel/app/customers/[customer-id]/layout.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { gql } from "@apollo/client"
+
 import { useEffect } from "react"
 
 import { CustomerDetailsCard } from "./details"
@@ -17,10 +18,10 @@ import { DetailsPageSkeleton } from "@/components/details-page-skeleton"
 import { ScrollArea, ScrollBar } from "@/ui/scroll-area"
 
 const TABS = [
-  { url: "/", tabLabel: "Overview" },
-  { url: "/credit-facilities", tabLabel: "Credit Facilities" },
-  { url: "/transactions", tabLabel: "Transactions" },
-  { url: "/documents", tabLabel: "Documents" },
+  { id: "1", url: "/", tabLabel: "Overview" },
+  { id: "2", url: "/credit-facilities", tabLabel: "Credit Facilities" },
+  { id: "3", url: "/transactions", tabLabel: "Transactions" },
+  { id: "4", url: "/documents", tabLabel: "Documents" },
 ]
 
 gql`
@@ -50,6 +51,7 @@ export default function CustomerLayout({
 }) {
   const { "customer-id": customerId } = params
   const { currentTab, handleTabChange } = useTabNavigation(TABS, customerId)
+
   const { setCustomLinks, resetToDefault } = useBreadcrumb()
 
   const { setCustomer } = useCreateContext()
@@ -87,12 +89,17 @@ export default function CustomerLayout({
   return (
     <main className="max-w-7xl m-auto">
       <CustomerDetailsCard customer={data.customer} />
-      <Tabs value={currentTab} onValueChange={handleTabChange} className="mt-2">
+      <Tabs
+        defaultValue={TABS[0].url}
+        value={currentTab}
+        onValueChange={handleTabChange}
+        className="mt-2"
+      >
         <ScrollArea>
           <div className="relative h-10">
             <TabsList className="flex absolute h-10">
               {TABS.map((tab) => (
-                <TabsTrigger key={tab.url} value={tab.url}>
+                <TabsTrigger key={tab.id} value={tab.url} id={`tab-${tab.id}`}>
                   {tab.tabLabel}
                 </TabsTrigger>
               ))}
@@ -101,7 +108,7 @@ export default function CustomerLayout({
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
         {TABS.map((tab) => (
-          <TabsContent key={tab.url} value={tab.url}>
+          <TabsContent key={tab.id} value={tab.url}>
             {children}
           </TabsContent>
         ))}
diff --git a/apps/admin-panel/app/customers/create.tsx b/apps/admin-panel/app/customers/create.tsx
index 22b83e5af..5e5c38223 100644
--- a/apps/admin-panel/app/customers/create.tsx
+++ b/apps/admin-panel/app/customers/create.tsx
@@ -75,7 +75,6 @@ const DetailsForm = ({
         value={formData.email}
         onChange={handleInputChange}
         disabled={isLoading}
-        autoFocus
       />
     </div>
     <div>
diff --git a/apps/admin-panel/app/layout.tsx b/apps/admin-panel/app/layout.tsx
index ee87a7bba..7ec85b9c3 100644
--- a/apps/admin-panel/app/layout.tsx
+++ b/apps/admin-panel/app/layout.tsx
@@ -9,6 +9,8 @@ import { AuthSessionProvider } from "./session-provider"
 
 import { AppLayout } from "./app-layout"
 
+import { CommandMenu } from "./command-menu"
+
 import ApolloServerWrapper from "@/lib/apollo-client/server-wrapper"
 import { Toast } from "@/components/toast"
 import { SidebarProvider, SidebarInset } from "@/ui/sidebar"
@@ -56,7 +58,10 @@ export default async function RootLayout({
               <SidebarProvider>
                 <AppSidebar appVersion={appVersion} />
                 <SidebarInset className="min-h-screen md:peer-data-[variant=inset]:shadow-none border">
-                  <AppLayout>{children}</AppLayout>
+                  <AppLayout>
+                    <CommandMenu />
+                    {children}
+                  </AppLayout>
                 </SidebarInset>
               </SidebarProvider>
             )}
diff --git a/apps/admin-panel/components/app-sidebar/index.tsx b/apps/admin-panel/components/app-sidebar/index.tsx
index 32e266540..a29051951 100644
--- a/apps/admin-panel/components/app-sidebar/index.tsx
+++ b/apps/admin-panel/components/app-sidebar/index.tsx
@@ -46,7 +46,7 @@ export function AppSidebar({ appVersion, ...props }: AppSidebarProps) {
       <SidebarFooter>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
+            <SidebarMenuButton size="lg" asChild tabIndex={-1}>
               <Link href="/dashboard">
                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <ShipWheel className="size-4" />
diff --git a/apps/admin-panel/components/app-sidebar/nav-section.tsx b/apps/admin-panel/components/app-sidebar/nav-section.tsx
index 2a562c157..fcfdb0ccf 100644
--- a/apps/admin-panel/components/app-sidebar/nav-section.tsx
+++ b/apps/admin-panel/components/app-sidebar/nav-section.tsx
@@ -45,7 +45,7 @@ export function NavSection({ items, label }: NavSectionProps) {
           return (
             <SidebarMenuItem key={item.url}>
               <SidebarMenuButton asChild tooltip={item.title} isActive={isActive}>
-                <Link href={item.url} prefetch={true} onClick={handleClick}>
+                <Link href={item.url} prefetch={true} onClick={handleClick} tabIndex={-1}>
                   <Icon className="h-4 w-4" />
                   <span className="text-base md:text-sm">{item.title}</span>
                 </Link>
diff --git a/apps/admin-panel/components/app-sidebar/user-block.tsx b/apps/admin-panel/components/app-sidebar/user-block.tsx
index 8a32a7955..ff1379d8f 100644
--- a/apps/admin-panel/components/app-sidebar/user-block.tsx
+++ b/apps/admin-panel/components/app-sidebar/user-block.tsx
@@ -59,7 +59,7 @@ export function UserBlock() {
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <SidebarMenuButton size="lg">
+            <SidebarMenuButton size="lg" tabIndex={-1}>
               <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                 <span className="text-sm font-medium">{initials}</span>
               </div>
diff --git a/apps/admin-panel/components/breadcrumb-wrapper.tsx b/apps/admin-panel/components/breadcrumb-wrapper.tsx
index fe51fe787..3e3e5c692 100644
--- a/apps/admin-panel/components/breadcrumb-wrapper.tsx
+++ b/apps/admin-panel/components/breadcrumb-wrapper.tsx
@@ -38,7 +38,11 @@ const BreadCrumbWrapper = ({ links }: FlexibleBreadcrumbProps) => {
           <React.Fragment key={index}>
             <BreadcrumbItem>
               {link.isCurrentPage ? (
-                <BreadcrumbPage className="flex items-center gap-3 align-middle">
+                <BreadcrumbPage
+                  className="flex items-center gap-3 align-middle"
+                  tabIndex={-1}
+                  aria-hidden="true"
+                >
                   {index === 0 && <Home className="h-4 w-4" />}
                   {link.title}
                 </BreadcrumbPage>
@@ -46,6 +50,8 @@ const BreadCrumbWrapper = ({ links }: FlexibleBreadcrumbProps) => {
                 <BreadcrumbLink
                   href={link.href}
                   className="flex items-center gap-3 align-middle"
+                  tabIndex={-1}
+                  aria-hidden="true"
                 >
                   {index === 0 && <Home className="h-4 w-4" />}
                   {link.title}
diff --git a/apps/admin-panel/components/data-table/index.tsx b/apps/admin-panel/components/data-table/index.tsx
index deac15d1a..c227ef352 100644
--- a/apps/admin-panel/components/data-table/index.tsx
+++ b/apps/admin-panel/components/data-table/index.tsx
@@ -1,9 +1,11 @@
 "use client"
 
-import React from "react"
+import React, { useState, useEffect, useRef } from "react"
 import Link from "next/link"
 import { ArrowRight } from "lucide-react"
 
+import { useRouter } from "next/navigation"
+
 import { useBreakpointDown } from "@/hooks/use-media-query"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/table"
 import { Button } from "@/ui/button"
@@ -47,6 +49,9 @@ const DataTable = <T,>({
   navigateTo,
 }: DataTableProps<T>) => {
   const isMobile = useBreakpointDown("md")
+  const [focusedRowIndex, setFocusedRowIndex] = useState<number>(-1)
+  const tableRef = useRef<HTMLDivElement>(null)
+  const router = useRouter()
 
   const getNavigationUrl = (item: T): string | null => {
     return navigateTo ? navigateTo(item) : null
@@ -58,6 +63,70 @@ const DataTable = <T,>({
     return url !== null && url !== ""
   }
 
+  const focusRow = (index: number) => {
+    if (index < 0 || !data.length) return
+    const validIndex = Math.min(Math.max(0, index), data.length - 1)
+    const row = document.querySelector(
+      `[data-testid="table-row-${validIndex}"]`,
+    ) as HTMLElement
+    if (row) {
+      row.focus({ preventScroll: true })
+      row.scrollIntoView({ behavior: "smooth", block: "nearest" })
+      setFocusedRowIndex(validIndex)
+    }
+  }
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (
+        document.activeElement?.tagName === "INPUT" ||
+        document.activeElement?.tagName === "TEXTAREA" ||
+        document.activeElement?.tagName === "SELECT" ||
+        document.activeElement?.tagName === "BUTTON"
+      ) {
+        return
+      }
+
+      if (!data.length) return
+
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault()
+          focusRow(focusedRowIndex - 1)
+          break
+        case "ArrowDown":
+          e.preventDefault()
+          focusRow(focusedRowIndex + 1)
+          break
+        case "Enter":
+          e.preventDefault()
+          if (focusedRowIndex >= 0) {
+            const item = data[focusedRowIndex]
+            if (onRowClick) {
+              onRowClick(item)
+            } else if (navigateTo) {
+              const url = getNavigationUrl(item)
+              if (url) {
+                router.push(url)
+              }
+            }
+          }
+          break
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, focusedRowIndex, onRowClick, navigateTo])
+
+  useEffect(() => {
+    if (data.length && focusedRowIndex === -1) {
+      focusRow(0)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.length])
+
   if (loading) {
     return isMobile ? (
       <div className="space-y-4" data-testid="loading-skeleton">
@@ -186,7 +255,12 @@ const DataTable = <T,>({
   }
 
   return (
-    <div className="w-full overflow-x-auto border rounded-md">
+    <div
+      ref={tableRef}
+      className="w-full overflow-x-auto border rounded-md"
+      tabIndex={-1}
+      role="grid"
+    >
       <Table className={className}>
         <TableHeader className="bg-secondary [&_tr:hover]:!bg-secondary">
           <TableRow className={headerClassName}>
@@ -211,12 +285,18 @@ const DataTable = <T,>({
               data-testid={`table-row-${rowIndex}`}
               key={rowIndex}
               onClick={() => onRowClick?.(item)}
+              tabIndex={0}
               className={cn(
                 typeof rowClassName === "function"
                   ? rowClassName(item, rowIndex)
                   : rowClassName,
                 onRowClick && "cursor-pointer",
+                focusedRowIndex === rowIndex && "bg-muted",
+                "hover:bg-muted/50 transition-colors outline-none",
               )}
+              onFocus={() => setFocusedRowIndex(rowIndex)}
+              role="row"
+              aria-selected={focusedRowIndex === rowIndex}
             >
               {columns.map((column, colIndex) => (
                 <TableCell
diff --git a/apps/admin-panel/components/paginated-table/index.tsx b/apps/admin-panel/components/paginated-table/index.tsx
index ba9d93f20..89d62ec0b 100644
--- a/apps/admin-panel/components/paginated-table/index.tsx
+++ b/apps/admin-panel/components/paginated-table/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import Link from "next/link"
 import { ArrowRight } from "lucide-react"
 import {
@@ -10,6 +10,8 @@ import {
   HiFilter,
 } from "react-icons/hi"
 
+import { useRouter } from "next/navigation"
+
 import { useBreakpointDown } from "@/hooks/use-media-query"
 import { Card } from "@/ui/card"
 import { Separator } from "@/ui/separator"
@@ -71,6 +73,11 @@ const PaginatedTable = <T,>({
   navigateTo,
 }: PaginatedTableProps<T>): React.ReactElement => {
   const isMobile = useBreakpointDown("md")
+  const tableRef = useRef<HTMLDivElement>(null)
+  const focusTimeoutRef = useRef<NodeJS.Timeout>()
+  const [focusedRowIndex, setFocusedRowIndex] = useState<number>(-1)
+  const [isTableFocused, setIsTableFocused] = useState(false)
+  const router = useRouter()
 
   const [sortState, setSortState] = useState<{
     column: keyof T | null
@@ -87,6 +94,133 @@ const PaginatedTable = <T,>({
     data && setDisplayData(data.edges.slice(startIdx, endIdx))
   }, [data, currentPage, pageSize])
 
+  const isNoFocusActive = () => {
+    const activeElement = document.activeElement
+    const isBaseElement =
+      !activeElement ||
+      activeElement === document.body ||
+      activeElement === document.documentElement
+    const isOutsideTable = !tableRef.current?.contains(activeElement)
+    const isInteractiveElement = activeElement?.matches(
+      "button, input, select, textarea, a[href], [tabindex], [contenteditable]",
+    )
+    return (isBaseElement || isOutsideTable) && !isInteractiveElement
+  }
+
+  const smartFocus = () => {
+    if (isNoFocusActive()) {
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current)
+      }
+
+      focusTimeoutRef.current = setTimeout(() => {
+        if (tableRef.current) {
+          tableRef.current.focus()
+          setIsTableFocused(true)
+
+          const targetIndex = focusedRowIndex >= 0 ? focusedRowIndex : 0
+          const targetRow = document.querySelector(
+            `[data-testid="table-row-${targetIndex}"]`,
+          ) as HTMLElement
+
+          if (targetRow) {
+            targetRow.focus()
+            setFocusedRowIndex(targetIndex)
+          }
+        }
+      }, 0)
+    }
+  }
+
+  const focusRow = (index: number) => {
+    if (index < 0 || !displayData.length || !isTableFocused) return
+    const validIndex = Math.min(Math.max(0, index), displayData.length - 1)
+    const row = document.querySelector(
+      `[data-testid="table-row-${validIndex}"]`,
+    ) as HTMLElement
+    if (row) {
+      row.focus({ preventScroll: true })
+      row.scrollIntoView({ behavior: "smooth", block: "nearest" })
+      setFocusedRowIndex(validIndex)
+    }
+  }
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!tableRef.current?.contains(document.activeElement) || !isTableFocused) return
+      if (
+        document.activeElement?.tagName === "INPUT" ||
+        document.activeElement?.tagName === "TEXTAREA" ||
+        document.activeElement?.tagName === "SELECT" ||
+        document.activeElement?.tagName === "BUTTON"
+      )
+        return
+      if (!displayData.length) return
+
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault()
+          focusRow(focusedRowIndex - 1)
+          break
+        case "ArrowDown":
+          e.preventDefault()
+          focusRow(focusedRowIndex + 1)
+          break
+        case "Enter":
+          e.preventDefault()
+          if (focusedRowIndex >= 0) {
+            const node = displayData[focusedRowIndex].node
+            if (onClick) {
+              onClick(node)
+            } else if (navigateTo) {
+              router.push(navigateTo(node))
+            }
+          }
+          break
+      }
+    }
+
+    if (isTableFocused) {
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displayData, focusedRowIndex, onClick, navigateTo, router, isTableFocused])
+
+  useEffect(() => {
+    setFocusedRowIndex(-1)
+  }, [currentPage])
+
+  useEffect(() => {
+    const shouldAutoFocus = data?.edges && data.edges.length > 0 && !loading
+    if (shouldAutoFocus) {
+      smartFocus()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data?.edges.length, loading])
+
+  useEffect(() => {
+    const handleFocusOut = (e: FocusEvent) => {
+      if (!tableRef.current?.contains(e.relatedTarget as Node)) {
+        if (isNoFocusActive()) {
+          smartFocus()
+        }
+      }
+    }
+
+    document.addEventListener("focusout", handleFocusOut)
+    return () => document.removeEventListener("focusout", handleFocusOut)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current)
+      }
+    }
+  }, [])
+
   const handleSort = (columnKey: keyof T) => {
     let newDirection: "ASC" | "DESC" = "ASC"
     if (sortState.column === columnKey && sortState.direction === "ASC") {
@@ -94,11 +228,13 @@ const PaginatedTable = <T,>({
     }
     setSortState({ column: columnKey, direction: newDirection })
     onSort && onSort(columnKey, newDirection)
+    smartFocus()
   }
 
   const handleFilter = (columnKey: keyof T, value: T[keyof T] | undefined) => {
     setFilterState({ [columnKey]: value } as Partial<Record<keyof T, T[keyof T]>>)
     onFilter && onFilter(columnKey, value)
+    smartFocus()
   }
 
   const handleNextPage = async () => {
@@ -109,11 +245,13 @@ const PaginatedTable = <T,>({
       await fetchMore(data.pageInfo.endCursor)
     }
     setCurrentPage((prevPage) => prevPage + 1)
+    smartFocus()
   }
 
   const handlePreviousPage = () => {
     if (currentPage > 1) {
       setCurrentPage((prevPage) => prevPage - 1)
+      smartFocus()
     }
   }
 
@@ -285,7 +423,19 @@ const PaginatedTable = <T,>({
 
   return (
     <>
-      <div className="overflow-x-auto border rounded-md">
+      <div
+        ref={tableRef}
+        className="overflow-x-auto border rounded-md focus:outline-none"
+        tabIndex={0}
+        role="grid"
+        onFocus={() => setIsTableFocused(true)}
+        onBlur={(e) => {
+          if (!tableRef.current?.contains(e.relatedTarget as Node)) {
+            setIsTableFocused(false)
+            setFocusedRowIndex(-1)
+          }
+        }}
+      >
         <Table className="table-fixed w-full">
           {showHeader && (
             <TableHeader className="bg-secondary [&_tr:hover]:!bg-secondary">
@@ -351,55 +501,45 @@ const PaginatedTable = <T,>({
             </TableHeader>
           )}
           <TableBody>
-            {loading
-              ? Array.from({ length: displayData.length || pageSize }).map(
-                  (_, rowIndex) => (
-                    <TableRow key={rowIndex} data-testid="loading-skeleton">
-                      {columns.map((_, colIndex) => (
-                        <TableCell key={colIndex}>
-                          <Skeleton className="h-4 w-full" />
-                        </TableCell>
-                      ))}
-                      {navigateTo && (
-                        <TableCell>
-                          <Skeleton className="h-4 w-full" />
-                        </TableCell>
-                      )}
-                    </TableRow>
-                  ),
-                )
-              : displayData.map(({ node }, idx) => (
-                  <TableRow
-                    key={idx}
-                    data-testid={`table-row-${idx}`}
-                    onClick={() => onClick?.(node)}
-                    className={onClick ? "cursor-pointer" : ""}
-                  >
-                    {columns.map((col) => (
-                      <TableCell
-                        key={col.key as string}
-                        className="whitespace-normal break-words"
-                      >
-                        {col.render
-                          ? col.render(node[col.key], node)
-                          : String(node[col.key])}
-                      </TableCell>
-                    ))}
-                    {navigateTo && (
-                      <TableCell>
-                        <Link href={navigateTo(node)}>
-                          <Button
-                            variant="outline"
-                            className="w-full flex items-center justify-between"
-                          >
-                            View
-                            <ArrowRight className="h-4 w-4" />
-                          </Button>
-                        </Link>
-                      </TableCell>
-                    )}
-                  </TableRow>
-                ))}
+            {!loading &&
+              displayData.map(({ node }, idx) => (
+                <TableRow
+                  key={idx}
+                  data-testid={`table-row-${idx}`}
+                  onClick={() => onClick?.(node)}
+                  tabIndex={0}
+                  className={`${onClick ? "cursor-pointer" : ""} ${
+                    focusedRowIndex === idx ? "bg-muted" : ""
+                  } hover:bg-muted/50 transition-colors outline-none`}
+                  onFocus={() => setFocusedRowIndex(idx)}
+                  role="row"
+                  aria-selected={focusedRowIndex === idx}
+                >
+                  {columns.map((col) => (
+                    <TableCell
+                      key={col.key as string}
+                      className="whitespace-normal break-words"
+                    >
+                      {col.render
+                        ? col.render(node[col.key], node)
+                        : String(node[col.key])}
+                    </TableCell>
+                  ))}
+                  {navigateTo && (
+                    <TableCell>
+                      <Link href={navigateTo(node)}>
+                        <Button
+                          variant="outline"
+                          className="w-full flex items-center justify-between"
+                        >
+                          View
+                          <ArrowRight className="h-4 w-4" />
+                        </Button>
+                      </Link>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))}
           </TableBody>
         </Table>
         <Separator />
diff --git a/apps/admin-panel/hooks/use-tab-navigation.tsx b/apps/admin-panel/hooks/use-tab-navigation.tsx
index ce87e64ff..fe21c266a 100644
--- a/apps/admin-panel/hooks/use-tab-navigation.tsx
+++ b/apps/admin-panel/hooks/use-tab-navigation.tsx
@@ -1,4 +1,7 @@
+"use client"
+
 import { useRouter, usePathname } from "next/navigation"
+import { useEffect, useCallback } from "react"
 
 type Tab = {
   url: string
@@ -9,22 +12,72 @@ export function useTabNavigation(tabs: Tab[], entityId: string) {
   const router = useRouter()
   const pathname = usePathname()
 
-  const getCurrentTab = () => {
+  const getCurrentTab = useCallback(() => {
     const pathAfterEntity = pathname.split(entityId)[1]
     if (!pathAfterEntity || pathAfterEntity === "/") {
       return tabs[0].url
     }
     return pathAfterEntity
-  }
+  }, [pathname, entityId, tabs])
 
-  const handleTabChange = (value: string) => {
-    const basePath = pathname.split(entityId)[0] + entityId
-    const newPath = value === tabs[0].url ? basePath : `${basePath}${value}`
-    router.push(newPath)
-  }
+  const currentTab = getCurrentTab()
+  const handleTabChange = useCallback(
+    (value: string) => {
+      const basePath = pathname.split(entityId)[0] + entityId
+      const newPath = value === tabs[0].url ? basePath : `${basePath}${value}`
+      router.push(newPath)
+    },
+    [pathname, entityId, router, tabs],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const tagName = document.activeElement?.tagName
+      if (
+        tagName === "INPUT" ||
+        tagName === "TEXTAREA" ||
+        tagName === "SELECT" ||
+        (document.activeElement as HTMLElement)?.isContentEditable
+      ) {
+        return
+      }
+
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+        return
+      }
+
+      event.preventDefault()
+      const currentIndex = tabs.findIndex((tab) => tab.url === currentTab)
+      if (currentIndex === -1) return
+
+      let newIndex = currentIndex
+      if (event.key === "ArrowRight") {
+        if (currentIndex < tabs.length - 1) {
+          newIndex = currentIndex + 1
+        }
+      } else if (event.key === "ArrowLeft") {
+        if (currentIndex > 0) {
+          newIndex = currentIndex - 1
+        }
+      }
+
+      if (newIndex !== currentIndex) {
+        const nextTab = tabs[newIndex]
+        handleTabChange(nextTab.url)
+      }
+    },
+    [tabs, currentTab, handleTabChange],
+  )
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown)
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [handleKeyDown])
 
   return {
-    currentTab: getCurrentTab(),
+    currentTab,
     handleTabChange,
   }
 }
diff --git a/apps/admin-panel/package.json b/apps/admin-panel/package.json
index af5b68bb9..83b0afc0b 100644
--- a/apps/admin-panel/package.json
+++ b/apps/admin-panel/package.json
@@ -45,6 +45,7 @@
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
     "embla-carousel-react": "^8.3.1",
     "lucide-react": "^0.461.0",
     "next": "14.2.10",
diff --git a/apps/admin-panel/pnpm-lock.yaml b/apps/admin-panel/pnpm-lock.yaml
index 8b3588a14..e0066f7d1 100644
--- a/apps/admin-panel/pnpm-lock.yaml
+++ b/apps/admin-panel/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: 1.0.0
+        version: 1.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       embla-carousel-react:
         specifier: ^8.3.1
         version: 8.5.1(react@18.3.1)
@@ -1787,6 +1790,9 @@ packages:
   '@radix-ui/number@1.1.0':
     resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
 
+  '@radix-ui/primitive@1.0.1':
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+
   '@radix-ui/primitive@1.1.0':
     resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
@@ -1858,6 +1864,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-compose-refs@1.0.1':
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.0':
     resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
@@ -1876,6 +1891,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.0.1':
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-context@1.1.0':
     resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
     peerDependencies:
@@ -1894,6 +1918,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.0.5':
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dialog@1.1.2':
     resolution: {integrity: sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==}
     peerDependencies:
@@ -1916,6 +1953,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.0.5':
+    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.1':
     resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
     peerDependencies:
@@ -1942,6 +1992,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.0.1':
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.1':
     resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
     peerDependencies:
@@ -1951,6 +2010,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.0.4':
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.0':
     resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
     peerDependencies:
@@ -1964,6 +2036,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-id@1.0.1':
+    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-id@1.1.0':
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:
@@ -2012,6 +2093,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-portal@1.0.4':
+    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.2':
     resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
     peerDependencies:
@@ -2025,6 +2119,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.0.1':
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-presence@1.1.1':
     resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
     peerDependencies:
@@ -2051,6 +2158,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@1.0.3':
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.0.0':
     resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
     peerDependencies:
@@ -2142,6 +2262,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-slot@1.0.2':
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.1.0':
     resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
     peerDependencies:
@@ -2186,6 +2315,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.0.1':
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.0':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
@@ -2195,6 +2333,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-controllable-state@1.0.1':
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-controllable-state@1.1.0':
     resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
@@ -2204,6 +2351,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-escape-keydown@1.0.3':
+    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-escape-keydown@1.1.0':
     resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
     peerDependencies:
@@ -2213,6 +2369,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-layout-effect@1.0.1':
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.0':
     resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
@@ -3607,6 +3772,12 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cmdk@1.0.0:
+    resolution: {integrity: sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -6380,6 +6551,16 @@ packages:
       '@types/react':
         optional: true
 
+  react-remove-scroll@2.5.5:
+    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-remove-scroll@2.6.0:
     resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
     engines: {node: '>=10'}
@@ -9461,6 +9642,10 @@ snapshots:
 
   '@radix-ui/number@1.1.0': {}
 
+  '@radix-ui/primitive@1.0.1':
+    dependencies:
+      '@babel/runtime': 7.26.0
+
   '@radix-ui/primitive@1.1.0': {}
 
   '@radix-ui/primitive@1.1.1': {}
@@ -9530,6 +9715,13 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -9542,6 +9734,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/react-context@1.0.1(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-context@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -9554,6 +9753,29 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/react-dialog@1.0.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.5(@types/react@18.3.12)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-dialog@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -9582,6 +9804,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-dismissable-layer@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -9610,12 +9846,31 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-focus-guards@1.1.1(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -9627,6 +9882,14 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-id@1.0.1(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-id@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -9687,6 +9950,16 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-portal@1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -9697,6 +9970,17 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-presence@1.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-presence@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -9717,6 +10001,16 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-slot': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -9825,6 +10119,14 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-slot@1.0.2(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-slot@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -9875,12 +10177,27 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -9888,6 +10205,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.12)(react@18.3.1)
@@ -9895,6 +10220,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.12)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.3.12)(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -11715,6 +12047,16 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cmdk@1.0.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -14789,6 +15131,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  react-remove-scroll@2.5.5(@types/react@18.3.12)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.6(@types/react@18.3.12)(react@18.3.1)
+      react-style-singleton: 2.2.1(@types/react@18.3.12)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.2(@types/react@18.3.12)(react@18.3.1)
+      use-sidecar: 1.1.2(@types/react@18.3.12)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   react-remove-scroll@2.6.0(@types/react@18.3.12)(react@18.3.1):
     dependencies:
       react: 18.3.1
diff --git a/apps/admin-panel/ui/command.tsx b/apps/admin-panel/ui/command.tsx
new file mode 100644
index 000000000..49c0d6b89
--- /dev/null
+++ b/apps/admin-panel/ui/command.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[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>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}