diff --git a/apps/console/src/components/CustomObjectFieldTemplate.tsx b/apps/console/src/components/CustomObjectFieldTemplate.tsx
index b8f09cb..c51b5e7 100644
--- a/apps/console/src/components/CustomObjectFieldTemplate.tsx
+++ b/apps/console/src/components/CustomObjectFieldTemplate.tsx
@@ -1,10 +1,46 @@
 import type {
   ObjectFieldTemplateProps,
+  ObjectFieldTemplatePropertyType,
   RJSFSchema,
   StrictRJSFSchema,
   FormContextType,
 } from "@rjsf/utils"
 
+function isSimpleField(schema: any): boolean {
+  if (!schema) return true
+  const type = schema.type
+  if (type === "object") return false
+  if (type === "array") {
+    const itemType = schema.items?.type
+    return itemType === "integer" || itemType === "string" || itemType === "number"
+  }
+  if (schema.anyOf || schema.oneOf || schema.allOf) {
+    if (schema["x-kubernetes-int-or-string"]) return true
+    return false
+  }
+  return true
+}
+
+function groupByComplexity(
+  properties: ObjectFieldTemplatePropertyType[],
+  parentSchema: any,
+) {
+  type Group = { simple: boolean; items: ObjectFieldTemplatePropertyType[] }
+  const groups: Group[] = []
+  let current: Group | null = null
+
+  for (const prop of properties) {
+    const fieldSchema = parentSchema?.properties?.[prop.name]
+    const simple = isSimpleField(fieldSchema)
+    if (!current || current.simple !== simple) {
+      current = { simple, items: [] }
+      groups.push(current)
+    }
+    current.items.push(prop)
+  }
+  return groups
+}
+
 export function CustomObjectFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
@@ -12,42 +48,48 @@ export function CustomObjectFieldTemplate<
 >(props: ObjectFieldTemplateProps<T, S, F>) {
   const { formData } = props
 
-  // Check if this is an addon object (has 'enabled' field and other config fields)
+  // Addon pattern: has 'enabled' + other config fields → conditional expand
   const hasEnabledField = props.properties.some((p) => p.name === "enabled")
   const hasOtherFields = props.properties.some((p) => p.name !== "enabled")
   const isAddon = hasEnabledField && hasOtherFields
 
-  // If this is an addon, use conditional rendering based on 'enabled' state
   if (isAddon) {
     const isEnabled = (formData as any)?.enabled === true
     const enabledProp = props.properties.find((p) => p.name === "enabled")
     const otherProps = props.properties.filter((p) => p.name !== "enabled")
+    const groups = groupByComplexity(otherProps, props.schema)
 
     return (
-      <fieldset id={props.idSchema.$id} className="border border-slate-200 rounded-lg p-4 mb-3">
+      <fieldset id={props.idSchema.$id} className="border border-slate-200 rounded-lg p-3 mb-3">
         {props.title && (
-          <legend className="text-sm font-medium text-slate-900 px-2">{props.title}</legend>
+          <legend className="text-xs font-semibold text-slate-700 px-1">{props.title}</legend>
         )}
-        {props.description && <p className="field-description text-xs text-slate-500 mb-3">{props.description}</p>}
-
-        {/* Always show the 'enabled' checkbox */}
-        {enabledProp && (
-          <div className="mb-3">
-            {enabledProp.content}
-          </div>
+        {props.description && (
+          <p className="field-description text-xs text-slate-400 mb-2">{props.description}</p>
         )}
 
-        {/* Show other fields only if enabled */}
+        {enabledProp && <div className="mb-2">{enabledProp.content}</div>}
+
         {isEnabled && otherProps.length > 0 && (
-          <div className="space-y-3 pl-6 border-l-2 border-blue-200">
-            {otherProps.map((prop) => (
-              <div key={prop.name}>{prop.content}</div>
-            ))}
+          <div className="pl-4 border-l-2 border-blue-200 space-y-0.5">
+            {groups.map((group, i) =>
+              group.simple ? (
+                <div key={i} className="grid-fields grid grid-cols-2 gap-x-3 xl:grid-cols-3">
+                  {group.items.map((prop) => (
+                    <div key={prop.name} className={group.items.length === 1 ? "col-span-full" : ""}>{prop.content}</div>
+                  ))}
+                </div>
+              ) : (
+                group.items.map((prop) => (
+                  <div key={prop.name}>{prop.content}</div>
+                ))
+              )
+            )}
           </div>
         )}
 
         {!isEnabled && otherProps.length > 0 && (
-          <p className="text-xs text-slate-400 italic mt-2">
+          <p className="text-xs text-slate-400 italic mt-1.5">
             Enable this addon to configure additional settings
           </p>
         )}
@@ -55,12 +97,26 @@ export function CustomObjectFieldTemplate<
     )
   }
 
-  // Otherwise, use default rendering
+  // Default: smart 2-column grid for simple fields, full width for complex
+  const groups = groupByComplexity(props.properties, props.schema)
+
   return (
     <fieldset id={props.idSchema.$id}>
       {props.title && <legend>{props.title}</legend>}
       {props.description && <p className="field-description">{props.description}</p>}
-      {props.properties.map((prop) => prop.content)}
+      {groups.map((group, i) =>
+        group.simple ? (
+          <div key={i} className="grid-fields grid grid-cols-2 gap-x-3 xl:grid-cols-3">
+            {group.items.map((prop) => (
+              <div key={prop.name} className={group.items.length === 1 ? "col-span-full" : ""}>{prop.content}</div>
+            ))}
+          </div>
+        ) : (
+          group.items.map((prop) => (
+            <div key={prop.name}>{prop.content}</div>
+          ))
+        )
+      )}
     </fieldset>
   )
 }
diff --git a/apps/console/src/components/command-palette/command-palette.tsx b/apps/console/src/components/command-palette/command-palette.tsx
index 02e3842..808011e 100644
--- a/apps/console/src/components/command-palette/command-palette.tsx
+++ b/apps/console/src/components/command-palette/command-palette.tsx
@@ -126,18 +126,18 @@ export function CommandPalette() {
           aria-label="Command palette"
         >
           {/* Header with optional back + search */}
-          <div className="flex items-center border-b border-slate-200 px-3" onKeyDown={handleKeyDown}>
+          <div className="flex items-center gap-2 border-b border-slate-100 px-4" onKeyDown={handleKeyDown}>
             {breadcrumb ? (
               <button
                 type="button"
                 onClick={goBack}
-                className="mr-2 flex items-center gap-1 shrink-0 rounded px-1.5 py-0.5 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-900 transition-colors"
+                className="flex items-center gap-1 shrink-0 rounded-md px-2 py-1 text-xs font-medium text-slate-500 bg-slate-100 hover:bg-slate-200 hover:text-slate-900 transition-colors"
               >
                 <ArrowLeft className="h-3 w-3" />
                 {breadcrumb}
               </button>
             ) : (
-              <Search className="mr-2 h-4 w-4 shrink-0 text-slate-400" />
+              <Search className="h-4 w-4 shrink-0 text-slate-400" />
             )}
             <input
               ref={inputRef}
@@ -148,37 +148,37 @@ export function CommandPalette() {
                   ? `Search in ${breadcrumb}...`
                   : "Type a command or search..."
               }
-              className="flex h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-slate-400"
+              className="h-12 w-full bg-transparent text-sm text-slate-900 outline-none placeholder:text-slate-400"
             />
             {!breadcrumb && (
-              <kbd className="pointer-events-none ml-2 hidden h-5 select-none items-center gap-0.5 rounded border border-slate-200 bg-slate-50 px-1.5 font-mono text-[10px] font-medium text-slate-600 sm:flex">
-                {isMac ? <span className="text-xs">⌘</span> : <span className="text-xs">Ctrl+</span>}K
+              <kbd className="pointer-events-none ml-1 hidden shrink-0 select-none items-center rounded-md border border-slate-200 bg-slate-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-slate-500 sm:flex">
+                {isMac ? "⌘K" : "Ctrl+K"}
               </kbd>
             )}
           </div>
 
           {/* Results list */}
           <div
-            className="max-h-[300px] overflow-y-auto p-1"
+            className="max-h-[320px] overflow-y-auto p-1.5"
             role="listbox"
             aria-label="Results"
           >
             {items.length === 0 && !isLoading && (
-              <div className="py-6 text-center text-sm text-slate-500">
+              <div className="py-8 text-center text-sm text-slate-400">
                 No results found.
               </div>
             )}
 
             {isLoading && items.length === 0 && (
-              <div className="py-6 text-center text-sm text-slate-500">
-                Loading...
+              <div className="py-8 text-center text-sm text-slate-400">
+                Loading…
               </div>
             )}
 
             {grouped.map((group) => (
               <div key={group.label} role="group" aria-label={group.label}>
                 {group.label && (
-                  <div className="px-2 py-1.5 text-xs font-medium text-slate-500">
+                  <div className="px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-widest text-slate-400">
                     {group.label}
                   </div>
                 )}
@@ -223,8 +223,8 @@ const PaletteItem = forwardRef<
       role="option"
       aria-selected={highlighted}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none",
-        highlighted && "bg-slate-100 text-slate-900"
+        "relative flex cursor-default items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none select-none transition-colors",
+        highlighted ? "bg-blue-50 text-blue-900" : "text-slate-700 hover:bg-slate-50"
       )}
       onClick={onSelect}
     >
@@ -233,14 +233,14 @@ const PaletteItem = forwardRef<
           {icon}
         </span>
       )}
-      <span className="flex-1 truncate">{label}</span>
+      <span className="flex-1 truncate font-medium">{label}</span>
       {description && (
-        <span className="text-xs text-slate-500 truncate max-w-[200px]">
+        <span className={cn("text-xs truncate max-w-[180px]", highlighted ? "text-blue-500" : "text-slate-400")}>
           {description}
         </span>
       )}
       {drilldown && (
-        <ChevronRight className="h-3.5 w-3.5 shrink-0 text-slate-400" />
+        <ChevronRight className={cn("h-3.5 w-3.5 shrink-0", highlighted ? "text-blue-400" : "text-slate-300")} />
       )}
     </div>
   )
diff --git a/apps/console/src/components/rjsf-templates.tsx b/apps/console/src/components/rjsf-templates.tsx
index 91b56f7..bfd9635 100644
--- a/apps/console/src/components/rjsf-templates.tsx
+++ b/apps/console/src/components/rjsf-templates.tsx
@@ -1,5 +1,6 @@
 import type {
   IconButtonProps,
+  ArrayFieldTemplateItemType,
   TemplatesType,
   FormContextType,
   RJSFSchema,
@@ -31,16 +32,46 @@ function IconButton<
 }
 
 const buttonClassName =
-  "rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50"
+  "rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm hover:bg-slate-50 hover:border-slate-300 transition-colors"
 
 const removeButtonClassName =
-  "rounded-md border border-red-300 bg-white px-3 py-1.5 text-sm font-medium text-red-600 hover:bg-red-50"
+  "rounded-md border border-red-200 bg-white px-3 py-1.5 text-sm font-medium text-red-600 shadow-sm hover:bg-red-50 hover:border-red-300 transition-colors"
+
+function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const { children, hasRemove, index, onDropIndexClick, disabled, readonly, schema } = props
+  const isNumeric = (schema as any).type === 'integer' || (schema as any).type === 'number'
+  return (
+    <div className="array-item-row group flex items-center gap-1.5 mb-1">
+      <div className={isNumeric ? 'w-36 shrink-0' : 'flex-1'}>{children}</div>
+      {hasRemove && (
+        <button
+          type="button"
+          aria-label="Remove"
+          className="opacity-0 group-hover:opacity-100 size-[26px] flex-shrink-0 flex items-center justify-center rounded-full border border-red-200 bg-white text-red-400 text-sm leading-none hover:bg-red-50 hover:text-red-600 hover:border-red-300 disabled:opacity-30 transition-all duration-150"
+          onClick={onDropIndexClick(index)}
+          disabled={disabled || readonly}
+        >
+          ×
+        </button>
+      )}
+    </div>
+  )
+}
 
 export const customTemplates = {
   ObjectFieldTemplate: CustomObjectFieldTemplate,
+  ArrayFieldItemTemplate: ArrayFieldItemTemplate,
   ButtonTemplates: {
     AddButton: (props: IconButtonProps) => (
-      <IconButton {...props} icon="+ Add" className={buttonClassName} />
+      <IconButton
+        {...props}
+        icon="+ add"
+        className="mt-0.5 flex items-center gap-1 px-2 py-1 text-xs font-medium text-slate-500 hover:text-blue-600 rounded-md border border-dashed border-slate-300 hover:border-blue-400 hover:bg-blue-50/60 bg-white transition-all duration-150"
+      />
     ),
     RemoveButton: (props: IconButtonProps) => (
       <IconButton {...props} icon="× Remove" className={removeButtonClassName} />
diff --git a/apps/console/src/components/schema-form.css b/apps/console/src/components/schema-form.css
index 1a29fa3..9d62a61 100644
--- a/apps/console/src/components/schema-form.css
+++ b/apps/console/src/components/schema-form.css
@@ -9,10 +9,10 @@
 }
 .rjsf-container .field > label,
 .rjsf-container .control-label {
-  @apply mb-1 block text-sm font-medium text-slate-700;
+  @apply mb-1 block text-xs font-medium text-slate-600;
 }
 .rjsf-container .field-description {
-  @apply mt-0.5 text-xs text-slate-500;
+  @apply mt-0.5 text-xs text-slate-400;
 }
 .rjsf-container .required {
   @apply ml-0.5 text-red-500;
@@ -21,22 +21,22 @@
 .rjsf-container input[type="number"],
 .rjsf-container input[type="email"],
 .rjsf-container textarea {
-  @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400;
+  @apply w-full rounded-md border border-slate-200 bg-white px-2.5 py-1.5 text-sm text-slate-900 shadow-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20;
 }
 .rjsf-container select {
-  @apply w-full rounded-lg border border-slate-300 bg-white pl-3 pr-8 py-2 text-sm text-slate-900 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400;
+  @apply w-full rounded-md border border-slate-200 bg-white pl-2.5 pr-8 py-1.5 text-sm text-slate-900 shadow-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20;
 }
 .rjsf-container input[type="checkbox"] {
-  @apply mr-2 size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500;
+  @apply mr-2 size-4 rounded border-slate-300 accent-blue-600 focus:ring-2 focus:ring-blue-500/20;
 }
 .rjsf-container fieldset {
-  @apply mt-2 mb-4 rounded-lg border border-slate-200 bg-white p-4;
+  @apply mt-1.5 mb-3 rounded-lg border border-slate-200 bg-white p-3 shadow-sm;
 }
 .rjsf-container fieldset > legend {
-  @apply -ml-1 px-1 text-sm font-semibold text-slate-900;
+  @apply -ml-1 px-1 text-xs font-semibold text-slate-700;
 }
 .rjsf-container fieldset fieldset {
-  @apply bg-slate-50;
+  @apply bg-slate-50/70 shadow-none p-2.5;
 }
 .rjsf-container .btn-add,
 .rjsf-container .object-property-expand button,
@@ -44,8 +44,67 @@
 .rjsf-container .array-item-remove button,
 .rjsf-container .array-item-move-up button,
 .rjsf-container .array-item-move-down button {
-  @apply rounded-md border border-slate-300 bg-white px-2 py-1 text-xs font-medium text-slate-700 hover:bg-slate-50;
+  @apply rounded-md border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600 shadow-sm hover:bg-slate-50 hover:border-slate-300 transition-colors;
 }
 .rjsf-container .text-danger {
-  @apply text-xs text-red-600;
+  @apply text-xs text-red-500;
+}
+/* Hide auto-generated labels for primitive array items (e.g. "fieldName-1") */
+.rjsf-container .field-array-of-integer .control-label,
+.rjsf-container .field-array-of-string .control-label,
+.rjsf-container .field-array-of-number .control-label {
+  display: none;
+}
+/* Remove bottom margin from fields inside array item rows (template handles spacing) */
+.rjsf-container .array-item-list .field {
+  margin-bottom: 0;
+}
+/* Compact fields inside simple-field grid columns */
+.rjsf-container .grid-fields {
+  padding-left: 7px;
+}
+.rjsf-container .grid-fields .field {
+  margin-bottom: 0.5rem;
+}
+.rjsf-container .grid-fields .field-description {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  cursor: default;
+}
+/* Boolean fields lack a control-label — add equivalent top offset so they align with adjacent fields */
+.rjsf-container .grid-fields .field-boolean {
+  padding-top: 1.25rem;
+}
+/* Array item row: hover highlight */
+.rjsf-container .array-item-row {
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.375rem;
+  margin-left: -0.375rem;
+  margin-right: -0.375rem;
+  transition: background-color 0.1s ease;
+}
+.rjsf-container .array-item-row:hover {
+  background-color: rgb(248 250 252);
+}
+/* Monospace + muted-code treatment for numeric array inputs (ports, counts, etc.) */
+.rjsf-container .field-array-of-integer input[type="number"],
+.rjsf-container .field-array-of-number input[type="number"] {
+  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.03em;
+  background-color: rgb(248 250 252);
+}
+/* Spinner arrows hidden for port-number inputs — value is exact, arrows add noise */
+.rjsf-container .field-array-of-integer input[type="number"]::-webkit-inner-spin-button,
+.rjsf-container .field-array-of-integer input[type="number"]::-webkit-outer-spin-button,
+.rjsf-container .field-array-of-number input[type="number"]::-webkit-inner-spin-button,
+.rjsf-container .field-array-of-number input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rjsf-container .field-array-of-integer input[type="number"],
+.rjsf-container .field-array-of-number input[type="number"] {
+  -moz-appearance: textfield;
 }
diff --git a/apps/console/src/components/ui/dialog.tsx b/apps/console/src/components/ui/dialog.tsx
index 8188823..fb6980d 100644
--- a/apps/console/src/components/ui/dialog.tsx
+++ b/apps/console/src/components/ui/dialog.tsx
@@ -15,7 +15,7 @@ function DialogBackdrop({
     <DialogPrimitive.Backdrop
       data-slot="dialog-backdrop"
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-[open]:opacity-100 data-[closed]:opacity-0",
+        "fixed inset-0 z-50 bg-black/25 backdrop-blur-sm transition-opacity duration-150 data-[open]:opacity-100 data-[closed]:opacity-0",
         className
       )}
       {...props}
@@ -32,7 +32,7 @@ function DialogPopup({
     <DialogPrimitive.Popup
       data-slot="dialog-popup"
       className={cn(
-        "fixed top-[20%] left-1/2 z-50 -translate-x-1/2 rounded-lg bg-white text-slate-900 shadow-md ring-1 ring-slate-200 outline-none transition-all duration-150",
+        "fixed top-[14%] left-1/2 z-50 -translate-x-1/2 rounded-xl bg-white text-slate-900 shadow-[0_20px_60px_rgba(0,0,0,0.18)] ring-1 ring-slate-900/8 outline-none transition-all duration-150",
         className
       )}
       {...props}
diff --git a/apps/console/src/lib/backup-utils.ts b/apps/console/src/lib/backup-utils.ts
index a5defed..5c3921f 100644
--- a/apps/console/src/lib/backup-utils.ts
+++ b/apps/console/src/lib/backup-utils.ts
@@ -2,7 +2,8 @@ export function enrichSchemaWithEnums(
   schema: unknown,
   path: string[],
   enumMap: Record<string, string[]>
-): unknown {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+): any {
   if (!schema || typeof schema !== "object") return schema
 
   const currentPath = path.join(".")
diff --git a/apps/console/src/lib/use-crd-schema.ts b/apps/console/src/lib/use-crd-schema.ts
index 05404bb..23a4031 100644
--- a/apps/console/src/lib/use-crd-schema.ts
+++ b/apps/console/src/lib/use-crd-schema.ts
@@ -2,6 +2,7 @@ import { useK8sGet } from "@cozystack/k8s-client"
 
 interface CRDVersion {
   name: string
+  storage?: boolean
   schema?: {
     openAPIV3Schema?: {
       properties?: {
diff --git a/apps/console/src/routes/ApplicationOrderPage.tsx b/apps/console/src/routes/ApplicationOrderPage.tsx
index b1e7d01..63f1b97 100644
--- a/apps/console/src/routes/ApplicationOrderPage.tsx
+++ b/apps/console/src/routes/ApplicationOrderPage.tsx
@@ -172,27 +172,29 @@ export function ApplicationOrderPage({
             </div>
           </div>
           <div className="flex items-center gap-2">
-            <div className="inline-flex rounded-lg border border-slate-200 bg-white p-0.5">
+            <div className="inline-flex rounded-lg border border-slate-200 bg-slate-50 p-0.5">
               <button
                 type="button"
+                aria-pressed={mode === "form"}
                 onClick={() => (mode === "yaml" ? enterForm() : undefined)}
                 className={cn(
-                  "flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+                  "flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-all",
                   mode === "form"
-                    ? "bg-slate-900 text-white"
-                    : "text-slate-600 hover:bg-slate-50",
+                    ? "bg-white text-blue-700 shadow-sm ring-1 ring-slate-200"
+                    : "text-slate-500 hover:text-slate-700",
                 )}
               >
                 <FormInput className="size-3.5" /> Form
               </button>
               <button
                 type="button"
+                aria-pressed={mode === "yaml"}
                 onClick={() => (mode === "form" ? enterYaml() : undefined)}
                 className={cn(
-                  "flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+                  "flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-all",
                   mode === "yaml"
-                    ? "bg-slate-900 text-white"
-                    : "text-slate-600 hover:bg-slate-50",
+                    ? "bg-white text-blue-700 shadow-sm ring-1 ring-slate-200"
+                    : "text-slate-500 hover:text-slate-700",
                 )}
               >
                 <FileCode className="size-3.5" /> YAML
@@ -220,10 +222,10 @@ export function ApplicationOrderPage({
       </div>
 
       {mode === "form" ? (
-        <div className="flex-1 overflow-auto bg-slate-50 p-6">
-          <div className="mx-auto max-w-3xl space-y-4">
-            <div className="rounded-lg border border-slate-200 bg-white p-5">
-              <label className="mb-1 block text-sm font-medium text-slate-700">
+        <div className="flex-1 overflow-auto bg-slate-50 p-4">
+          <div className="space-y-3">
+            <div className="rounded-lg border border-slate-200 bg-white p-4">
+              <label className="mb-1 block text-xs font-medium text-slate-600">
                 Name <span className="text-red-500">*</span>
               </label>
               <input
@@ -232,7 +234,7 @@ export function ApplicationOrderPage({
                 onChange={(e) => setName(e.target.value)}
                 disabled={!!editMode}
                 placeholder={ad.spec?.application.singular ?? "name"}
-                className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400 disabled:bg-slate-50 disabled:text-slate-500"
+                className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition-shadow focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 disabled:bg-slate-50 disabled:text-slate-400"
               />
               {tenantNamespace && (
                 <p className="mt-1.5 text-xs text-slate-500">
@@ -241,7 +243,7 @@ export function ApplicationOrderPage({
               )}
             </div>
             {ad.spec?.application.openAPISchema && (
-              <div className="rounded-lg border border-slate-200 bg-white p-5">
+              <div className="rounded-lg border border-slate-200 bg-white p-4">
                 <SchemaForm
                   openAPISchema={ad.spec.application.openAPISchema}
                   keysOrder={ad.spec?.dashboard?.keysOrder}
diff --git a/apps/console/src/routes/detail/VncTab.tsx b/apps/console/src/routes/detail/VncTab.tsx
index e75b610..38b53d0 100644
--- a/apps/console/src/routes/detail/VncTab.tsx
+++ b/apps/console/src/routes/detail/VncTab.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react"
-import { Monitor } from "lucide-react"
-import { Section, Spinner } from "@cozystack/ui"
+import { Maximize2, Minimize2, Power, RotateCcw, Terminal } from "lucide-react"
 import type { ApplicationDefinition, ApplicationInstance } from "@cozystack/types"
 
 interface VncTabProps {
@@ -11,222 +10,274 @@ interface VncTabProps {
 export function VncTab({ ad, instance }: VncTabProps) {
   const ns = instance.metadata.namespace
   const appKind = ad.spec?.application.kind
-  const [error, setError] = useState<string | null>(null)
-  const [connecting, setConnecting] = useState(true)
-  const [connected, setConnected] = useState(false)
-  const vncContainerRef = useRef<HTMLDivElement>(null)
+
+  const containerRef = useRef<HTMLDivElement>(null)
   const rfbRef = useRef<any>(null)
+  const [connected, setConnected] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [fullscreen, setFullscreen] = useState(false)
+  const [connectionKey, setConnectionKey] = useState(0)
+  const [desktopSize, setDesktopSize] = useState<{ width: number; height: number } | null>(null)
 
   useEffect(() => {
-    if (appKind !== "VMInstance" || !vncContainerRef.current) return
+    if (!containerRef.current || appKind !== "VMInstance") return
+
+    const el = containerRef.current
+    while (el.firstChild) el.removeChild(el.firstChild)
 
-    let mounted = true
+    setLoading(true)
+    setError(null)
+    setConnected(false)
 
-    // Build WebSocket URL using current location
-    // KubeVirt VMI name has "vm-instance-" prefix added by Cozystack
-    // Use /k8s prefix for proper nginx routing (old dashboard compatibility)
     const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:"
     const vmiName = `vm-instance-${instance.metadata.name}`
     const wsUrl = `${wsProtocol}//${window.location.host}/k8s/apis/subresources.kubevirt.io/v1/namespaces/${ns}/virtualmachineinstances/${vmiName}/vnc`
 
-    // Dynamically import RFB
-    // noVNC is CJS: Vite wraps module.exports as .default, so RFB is at .default.default
-    import("@novnc/novnc/lib/rfb").then((module) => {
-      if (!mounted || !vncContainerRef.current) return
+    // Prevent stale import resolutions from firing after cleanup or reconnect
+    let cancelled = false
 
+    import("@novnc/novnc/lib/rfb").then((module) => {
+      if (cancelled || !containerRef.current) return
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const RFB = (module as any).default?.default ?? module.default
-
       try {
-        // Initialize noVNC RFB client
-        const rfb = new RFB(vncContainerRef.current, wsUrl, {
-          credentials: {},
-        })
-
-        // Set scaling mode
+        const rfb = new RFB(el, wsUrl, { credentials: {} })
         rfb.scaleViewport = true
         rfb.resizeSession = false
 
-        // Event handlers
+        // Guard each handler: if rfbRef was replaced by a newer session, ignore
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         rfb.addEventListener("connect", () => {
-          if (mounted) {
-            setConnecting(false)
-            setConnected(true)
-            setError(null)
-          }
+          if (rfbRef.current !== rfb) return
+          setLoading(false)
+          setConnected(true)
+          setError(null)
+          requestAnimationFrame(() => {
+            const canvas = el.querySelector("canvas")
+            if (canvas) setDesktopSize({ width: canvas.width, height: canvas.height })
+          })
         })
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         rfb.addEventListener("disconnect", (e: any) => {
-          if (mounted) {
-            setConnecting(false)
-            setConnected(false)
-            if (!e.detail.clean) {
-              setError(`Disconnected: ${e.detail.reason || "unknown reason"}`)
-            }
-          }
+          if (rfbRef.current !== rfb) return
+          setConnected(false)
+          setLoading(false)
+          if (!e.detail?.clean) setError(`Connection lost: ${e.detail?.reason ?? "unknown"}`)
         })
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         rfb.addEventListener("securityfailure", (e: any) => {
-          if (mounted) {
-            setConnecting(false)
-            setConnected(false)
-            setError(`Security failure: ${e.detail.status || "authentication failed"}`)
-          }
+          if (rfbRef.current !== rfb) return
+          setConnected(false)
+          setLoading(false)
+          setError(`Security failure: ${e.detail?.status ?? "authentication failed"}`)
         })
 
         rfbRef.current = rfb
       } catch (err) {
-        if (mounted) {
-          setConnecting(false)
+        if (!cancelled) {
+          setLoading(false)
           setError(`Failed to initialize VNC: ${(err as Error).message}`)
         }
       }
     }).catch((err) => {
-      if (mounted) {
-        setConnecting(false)
+      if (!cancelled) {
+        setLoading(false)
         setError(`Failed to load VNC library: ${err.message}`)
       }
     })
 
-    // Cleanup on unmount
     return () => {
-      mounted = false
+      cancelled = true
       if (rfbRef.current) {
-        rfbRef.current.disconnect()
+        try { rfbRef.current.disconnect() } catch {}
         rfbRef.current = null
       }
     }
-  }, [appKind, ns, instance.metadata.name])
+  }, [appKind, ns, instance.metadata.name, connectionKey]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const handler = () => setFullscreen(!!document.fullscreenElement)
+    document.addEventListener("fullscreenchange", handler)
+    return () => document.removeEventListener("fullscreenchange", handler)
+  }, [])
 
   if (appKind !== "VMInstance") {
     return (
-      <div className="p-6">
-        <Section>
+      <div className="flex h-full items-center justify-center p-6">
+        <div className="flex flex-col items-center gap-2 text-center">
+          <Terminal className="h-8 w-8 text-slate-300" />
           <p className="text-sm text-slate-500">VNC is only available for VMInstance.</p>
-        </Section>
+        </div>
       </div>
     )
   }
 
-  const handleCtrlAltDel = () => {
-    if (rfbRef.current) {
-      rfbRef.current.sendCtrlAltDel()
-    }
-  }
-
-  const handleDisconnect = () => {
-    if (rfbRef.current) {
-      rfbRef.current.disconnect()
+  const handleFullscreen = () => {
+    const wrapper = containerRef.current?.parentElement
+    if (!wrapper) return
+    if (!document.fullscreenElement) {
+      wrapper.requestFullscreen()
+    } else {
+      document.exitFullscreen()
     }
   }
 
   const handleReconnect = () => {
-    // Disconnect previous client before clearing container
     if (rfbRef.current) {
-      rfbRef.current.disconnect()
+      try { rfbRef.current.disconnect() } catch {}
       rfbRef.current = null
     }
+    setConnectionKey((k) => k + 1)
+  }
 
-    if (vncContainerRef.current) {
-      vncContainerRef.current.innerHTML = ""
-      setConnecting(true)
-      setError(null)
+  const statusColor = connected
+    ? "bg-emerald-500"
+    : loading
+      ? "bg-amber-400"
+      : "bg-red-500"
 
-      const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:"
-      const vmiName = `vm-instance-${instance.metadata.name}`
-      const wsUrl = `${wsProtocol}//${window.location.host}/k8s/apis/subresources.kubevirt.io/v1/namespaces/${ns}/virtualmachineinstances/${vmiName}/vnc`
+  const statusLabel = connected ? "Connected" : loading ? "Connecting…" : "Disconnected"
 
-      import("@novnc/novnc/lib/rfb").then((module) => {
-        if (!vncContainerRef.current) return
+  return (
+    <div className="flex h-full flex-col p-4">
+      {/* Outer panel — shadow bridges the light page and dark terminal */}
+      <div className="flex flex-1 flex-col overflow-hidden rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.12)] ring-1 ring-slate-900/8">
 
-        const RFB = (module as any).default?.default ?? module.default
+        {/* ── Toolbar ── */}
+        <div className="flex shrink-0 items-center justify-between bg-[#1e2330] px-3 py-2">
 
-        try {
-          const rfb = new RFB(vncContainerRef.current, wsUrl, { credentials: {} })
-          rfb.scaleViewport = true
-          rfb.resizeSession = false
+          {/* Left: status pill + vm name */}
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1.5">
+              <span className={`relative flex h-2 w-2`}>
+                {connected && (
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />
+                )}
+                <span className={`relative inline-flex h-2 w-2 rounded-full ${statusColor}`} />
+              </span>
+              <span className="text-[11px] font-medium tracking-wide text-slate-400">
+                {statusLabel}
+              </span>
+            </div>
 
-          rfb.addEventListener("connect", () => {
-            setConnecting(false)
-            setConnected(true)
-            setError(null)
-          })
+            <div className="h-3.5 w-px bg-slate-700" />
 
-          rfb.addEventListener("disconnect", (e: any) => {
-            setConnecting(false)
-            setConnected(false)
-            if (!e.detail.clean) {
-              setError(`Disconnected: ${e.detail.reason || "unknown reason"}`)
-            }
-          })
+            <div className="flex items-center gap-1.5 text-[11px] text-slate-500">
+              <Terminal className="h-3 w-3" />
+              <span className="font-mono">{instance.metadata.name}</span>
+            </div>
+          </div>
 
-          rfb.addEventListener("securityfailure", (e: any) => {
-            setConnecting(false)
-            setConnected(false)
-            setError(`Security failure: ${e.detail.status || "authentication failed"}`)
-          })
+          {/* Right: action buttons */}
+          <div className="flex items-center gap-0.5">
+            {connected && (
+              <ToolbarButton
+                onClick={() => rfbRef.current?.sendCtrlAltDel()}
+                title="Ctrl+Alt+Del"
+              >
+                <Power className="h-3.5 w-3.5" />
+              </ToolbarButton>
+            )}
 
-          rfbRef.current = rfb
-        } catch (err) {
-          setConnecting(false)
-          setError(`Failed to reconnect: ${(err as Error).message}`)
-        }
-      }).catch((err) => {
-        setConnecting(false)
-        setError(`Failed to load VNC library: ${err.message}`)
-      })
-    }
-  }
+            <div className="mx-1 h-3.5 w-px bg-slate-700" />
 
-  return (
-    <div className="flex h-full flex-col p-6">
-      <Section
-        title={
-          <span className="inline-flex items-center gap-2">
-            <Monitor className="size-4 text-slate-500" /> VNC Console
-          </span>
-        }
-      >
-        <div className="mt-4 flex flex-col gap-3">
-          {connecting && (
-            <div className="flex items-center gap-2 text-sm text-slate-500">
-              <Spinner /> Connecting to VNC...
-            </div>
-          )}
-          {error && (
-            <div className="rounded-md bg-red-50 border border-red-200 p-3 text-sm text-red-700">
-              <strong>Connection Error:</strong> {error}
-            </div>
-          )}
-          <div
-            ref={vncContainerRef}
-            className="rounded-lg border border-slate-200 bg-black overflow-hidden"
-            style={{ height: "calc(100vh - 320px)", width: "100%" }}
-          />
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleCtrlAltDel}
-              disabled={!connected}
-              className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Ctrl+Alt+Del
-            </button>
-            <button
-              onClick={handleDisconnect}
-              disabled={!connected}
-              className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
+            <ToolbarButton
+              onClick={handleFullscreen}
+              title={fullscreen ? "Exit fullscreen" : "Fullscreen"}
             >
-              Disconnect
-            </button>
-            <button
+              {fullscreen
+                ? <Minimize2 className="h-3.5 w-3.5" />
+                : <Maximize2 className="h-3.5 w-3.5" />}
+            </ToolbarButton>
+
+            <ToolbarButton
               onClick={handleReconnect}
-              disabled={connecting}
-              className="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={loading}
+              title="Reconnect"
             >
-              Reconnect
-            </button>
+              <RotateCcw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
+            </ToolbarButton>
           </div>
         </div>
-      </Section>
+
+        {/* ── Canvas area ── */}
+        <div
+          className="relative flex-1 overflow-hidden bg-black"
+          style={desktopSize
+            ? { aspectRatio: `${desktopSize.width} / ${desktopSize.height}`, width: "100%", flex: "unset" }
+            : undefined}
+        >
+          {/* Loading overlay */}
+          {loading && (
+            <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-[#0d0f14]">
+              <div className="flex gap-1">
+                {[0, 1, 2].map((i) => (
+                  <span
+                    key={i}
+                    className="h-1.5 w-1.5 rounded-full bg-slate-600 animate-bounce"
+                    style={{ animationDelay: `${i * 0.15}s` }}
+                  />
+                ))}
+              </div>
+              <p className="text-[11px] font-medium tracking-widest text-slate-600 uppercase">
+                Connecting
+              </p>
+            </div>
+          )}
+
+          {/* Error overlay */}
+          {error && !loading && (
+            <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 bg-[#0d0f14] p-8">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-900/40 ring-1 ring-red-800/60">
+                <Terminal className="h-5 w-5 text-red-400" />
+              </div>
+              <div className="text-center">
+                <p className="text-sm font-medium text-red-400">Connection failed</p>
+                <p className="mt-1 text-xs text-slate-600">{error}</p>
+              </div>
+              <button
+                type="button"
+                onClick={handleReconnect}
+                className="flex items-center gap-1.5 rounded-md bg-slate-800 px-3 py-1.5 text-xs font-medium text-slate-300 ring-1 ring-slate-700 transition-colors hover:bg-slate-700 hover:text-white"
+              >
+                <RotateCcw className="h-3 w-3" /> Reconnect
+              </button>
+            </div>
+          )}
+
+          <div ref={containerRef} className="absolute inset-0" />
+        </div>
+      </div>
     </div>
   )
 }
+
+function ToolbarButton({
+  onClick,
+  title,
+  disabled,
+  label,
+  children,
+}: {
+  onClick: () => void
+  title: string
+  disabled?: boolean
+  label?: string
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className="flex items-center gap-1 rounded px-1.5 py-1 text-slate-500 transition-colors hover:bg-slate-700/60 hover:text-slate-200 disabled:cursor-not-allowed disabled:opacity-30"
+    >
+      {children}
+      {label && <span className="text-[10px] font-medium">{label}</span>}
+    </button>
+  )
+}
diff --git a/packages/ui/src/components/layout/AppShell.tsx b/packages/ui/src/components/layout/AppShell.tsx
index 9c2172f..6d8b172 100644
--- a/packages/ui/src/components/layout/AppShell.tsx
+++ b/packages/ui/src/components/layout/AppShell.tsx
@@ -11,7 +11,6 @@ interface AppShellProps {
   username?: string
   userSettingsUrl?: string
   signOutUrl?: string
-  notificationBell?: ReactNode
   onSearchClick?: () => void
   version?: string
   children?: ReactNode
@@ -26,7 +25,6 @@ export function AppShell({
   username,
   userSettingsUrl,
   signOutUrl,
-  notificationBell,
   onSearchClick,
   version,
   children,
@@ -42,7 +40,6 @@ export function AppShell({
         username={username}
         userSettingsUrl={userSettingsUrl}
         signOutUrl={signOutUrl}
-        notificationBell={notificationBell}
         onSearchClick={onSearchClick}
         version={version}
         scrolled={scrolled}
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index 3dcccc3..416db33 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -1,6 +1,6 @@
-import { useState, type ReactNode } from "react"
+import { useState } from "react"
 import { Link, useLocation } from "react-router"
-import { Search, Bell, User, Settings, LogOut } from "lucide-react"
+import { Search, User, Settings, LogOut } from "lucide-react"
 import { Logo } from "../Logo.tsx"
 import { cn } from "../../lib/utils.ts"
 
@@ -19,7 +19,6 @@ interface HeaderProps {
   username?: string
   userSettingsUrl?: string
   signOutUrl?: string
-  notificationBell?: ReactNode
   onSearchClick?: () => void
   version?: string
   scrolled?: boolean
@@ -37,7 +36,6 @@ export function Header({
   username,
   userSettingsUrl,
   signOutUrl,
-  notificationBell,
   onSearchClick,
   version,
   scrolled,
@@ -99,26 +97,8 @@ export function Header({
         >
           <Search className="h-[18px] w-[18px]" />
         </button>
-        {notificationBell ?? (
-          <button
-            type="button"
-            className="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-700"
-          >
-            <Bell className="h-[18px] w-[18px]" />
-          </button>
-        )}
-
         <div className="mx-2 h-5 w-px bg-slate-200" />
 
-        <button
-          type="button"
-          className="rounded-md px-2 py-1 text-xs font-medium text-slate-600 hover:bg-slate-100"
-        >
-          EN
-        </button>
-
-        <div className="mx-1 h-5 w-px bg-slate-200" />
-
         <div className="relative">
           <button
             type="button"