diff --git a/artifacts/tx-os/src/pages/admin.tsx b/artifacts/tx-os/src/pages/admin.tsx
index 7ea915a9..6151a1ff 100644
--- a/artifacts/tx-os/src/pages/admin.tsx
+++ b/artifacts/tx-os/src/pages/admin.tsx
@@ -138,7 +138,17 @@ import { useQueryClient, useQuery } from "@tanstack/react-query";
 import { useAuth } from "@/contexts/AuthContext";
 import { useUpload, type UploadResponse } from "@workspace/object-storage-web";
 import { resolveServiceImageUrl } from "@/lib/image-url";
-import { ArrowRight, ArrowLeft, Settings, Plus, Pencil, Trash2, Shield, Upload, Loader2, LayoutDashboard, Grid2X2, Coffee, Users as UsersIcon, Menu as MenuIcon, TrendingUp, TrendingDown, UserPlus, Activity, KeyRound, Copy, ChevronDown, ScrollText, Download, X, ImageIcon, Power } from "lucide-react";
+import { ArrowRight, ArrowLeft, Settings, Plus, Pencil, Trash2, Shield, Upload, Loader2, LayoutDashboard, Grid2X2, Coffee, Users as UsersIcon, Menu as MenuIcon, TrendingUp, TrendingDown, UserPlus, Activity, KeyRound, Copy, ChevronDown, ScrollText, Download, X, ImageIcon, Power, HelpCircle, Palette, Link2, Hash, type LucideIcon } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+
+function resolveAppIcon(name: string): LucideIcon | null {
+  if (!name) return null;
+  const Candidate = (LucideIcons as Record<string, unknown>)[name];
+  if (typeof Candidate === "function" || (typeof Candidate === "object" && Candidate !== null)) {
+    return Candidate as LucideIcon;
+  }
+  return null;
+}
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -1183,76 +1193,250 @@ export default function AdminPage() {
       </div>
 
       {/* Edit App Modal */}
-      {editingApp && (
-        <div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-          <div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4 max-h-[90vh] overflow-y-auto">
-            <h2 className="font-semibold text-foreground">
-              {editingApp.id ? t("admin.editApp") : t("admin.addApp")}
-            </h2>
-            {(
-              [
-                { field: "nameAr", label: t("admin.appNameAr") },
-                { field: "nameEn", label: t("admin.appNameEn") },
-                { field: "slug", label: t("admin.appSlug") },
-                { field: "iconName", label: t("admin.appIcon") },
-                { field: "route", label: t("admin.appRoute") },
-                { field: "color", label: t("admin.appColor") },
-              ] as { field: keyof AppForm; label: string }[]
-            ).map(({ field, label }) => (
-              <div key={field} className="space-y-1">
-                <Label>{label}</Label>
-                <Input
-                  value={String(editingApp.form[field])}
-                  onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, [field]: e.target.value } })}
-                  className="bg-white/70 border-slate-200"
-                />
+      {editingApp && (() => {
+        const PreviewIcon = resolveAppIcon(editingApp.form.iconName);
+        const previewColor = /^#[0-9a-fA-F]{6}$/.test(editingApp.form.color)
+          ? editingApp.form.color
+          : "#6366f1";
+        return (
+        <div
+          className="fixed inset-0 bg-slate-950/50 backdrop-blur-md z-50 flex items-center justify-center p-4 animate-in fade-in duration-150"
+          onClick={(e) => { if (e.target === e.currentTarget) setEditingApp(null); }}
+        >
+          <div className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] flex flex-col shadow-2xl border border-slate-200/80 overflow-hidden animate-in zoom-in-95 duration-150">
+            {/* Header */}
+            <div className="flex items-start justify-between gap-3 px-5 sm:px-6 pt-5 pb-4 border-b border-slate-100">
+              <div className="flex items-center gap-3 min-w-0">
+                <div
+                  className="shrink-0 w-10 h-10 rounded-xl text-white flex items-center justify-center shadow-md"
+                  style={{
+                    background: `linear-gradient(135deg, ${previewColor}, ${previewColor}cc)`,
+                    boxShadow: `0 6px 18px ${previewColor}40`,
+                  }}
+                >
+                  {PreviewIcon ? <PreviewIcon size={18} /> : <LayoutDashboard size={18} />}
+                </div>
+                <div className="min-w-0">
+                  <h2 className="font-semibold text-slate-900 text-base leading-tight truncate">
+                    {editingApp.id ? t("admin.editApp") : t("admin.addApp")}
+                  </h2>
+                  <p className="text-xs text-slate-500 mt-0.5 truncate">
+                    {editingApp.id
+                      ? (lang === "ar" ? "حدّث تفاصيل التطبيق وأذوناته" : "Update app details and permissions")
+                      : (lang === "ar" ? "أضف تطبيقاً جديداً للوحة" : "Add a new app to the launcher")}
+                  </p>
+                </div>
               </div>
-            ))}
-            {editingApp.id !== undefined ? (
-              <AppPermissionsEditor appId={editingApp.id} />
-            ) : (
-              <NewAppPermissionsPicker
-                selectedIds={editingApp.form.permissionIds}
-                onChange={(next) =>
-                  setEditingApp({
-                    ...editingApp,
-                    form: { ...editingApp.form, permissionIds: next },
-                  })
-                }
-              />
-            )}
-            {editingApp.id !== undefined && (
-              <PermissionAuditHistory
-                targetKind="app"
-                targetId={editingApp.id}
-                enabled={true}
-                language={lang}
-                scopeI18nKey="admin.apps.history"
-                changeKindLabel={null}
-                labelResolver={(_ck, id) => {
-                  const p = (permissionsList ?? []).find((x) => x.id === id);
-                  return p ? p.name : `#${id}`;
-                }}
-              />
-            )}
-            {editingApp.id !== undefined && (
-              <RecentActivityForTarget
-                targetType="app"
-                targetId={editingApp.id}
-                enabled={true}
-                lang={lang}
-                onViewFullHistory={() =>
-                  openAuditLogForTarget("app", editingApp.id!)
-                }
-              />
-            )}
-            <div className="flex gap-2">
-              <Button variant="outline" className="flex-1" onClick={() => setEditingApp(null)}>{t("common.cancel")}</Button>
-              <Button className="flex-1" onClick={handleSaveApp}>{t("common.save")}</Button>
+              <button
+                type="button"
+                onClick={() => setEditingApp(null)}
+                className="shrink-0 -m-1 p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors"
+                aria-label={t("common.cancel")}
+              >
+                <X size={18} />
+              </button>
+            </div>
+
+            {/* Body */}
+            <div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5">
+              {/* Names row */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">ع</span>
+                    {t("admin.appNameAr")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.nameAr}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, nameAr: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="rtl"
+                    placeholder="الملاحظات"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">EN</span>
+                    {t("admin.appNameEn")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.nameEn}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, nameEn: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="ltr"
+                    placeholder="Notes"
+                  />
+                </div>
+              </div>
+
+              {/* Identifier row */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Hash size={12} className="text-slate-500" />
+                    {t("admin.appSlug")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.slug}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, slug: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="ltr"
+                    placeholder="notes"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Link2 size={12} className="text-slate-500" />
+                    {t("admin.appRoute")}
+                  </Label>
+                  <Input
+                    value={editingApp.form.route}
+                    onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, route: e.target.value } })}
+                    className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                    dir="ltr"
+                    placeholder="/notes"
+                  />
+                </div>
+              </div>
+
+              {/* Visuals row — icon + color with live previews */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {/* Icon picker */}
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Grid2X2 size={12} className="text-slate-500" />
+                    {t("admin.appIcon")}
+                  </Label>
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={cn(
+                        "shrink-0 w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
+                        PreviewIcon
+                          ? "border-slate-200 bg-white text-slate-700"
+                          : "border-dashed border-slate-300 bg-slate-50 text-slate-300"
+                      )}
+                      title={PreviewIcon ? editingApp.form.iconName : (lang === "ar" ? "اسم أيقونة غير معروف" : "Unknown icon name")}
+                    >
+                      {PreviewIcon ? <PreviewIcon size={18} /> : <HelpCircle size={18} />}
+                    </div>
+                    <Input
+                      value={editingApp.form.iconName}
+                      onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, iconName: e.target.value } })}
+                      className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                      dir="ltr"
+                      placeholder="StickyNote"
+                    />
+                  </div>
+                  <p className="text-[11px] text-slate-400 leading-snug">
+                    {lang === "ar" ? "اسم أيقونة من Lucide (مثل: StickyNote, Coffee, Users)" : "Lucide icon name (e.g. StickyNote, Coffee, Users)"}
+                  </p>
+                </div>
+
+                {/* Color picker */}
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                    <Palette size={12} className="text-slate-500" />
+                    {t("admin.appColor")}
+                  </Label>
+                  <div className="flex items-center gap-2">
+                    <label
+                      className="shrink-0 relative w-10 h-10 rounded-lg border border-slate-200 cursor-pointer overflow-hidden shadow-sm hover:ring-2 hover:ring-indigo-500/30 transition"
+                      style={{ backgroundColor: previewColor }}
+                      title={lang === "ar" ? "اختر اللون" : "Pick color"}
+                    >
+                      <input
+                        type="color"
+                        value={previewColor}
+                        onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, color: e.target.value } })}
+                        className="absolute inset-0 opacity-0 cursor-pointer"
+                      />
+                    </label>
+                    <Input
+                      value={editingApp.form.color}
+                      onChange={(e) => setEditingApp({ ...editingApp, form: { ...editingApp.form, color: e.target.value } })}
+                      className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm font-mono uppercase focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
+                      dir="ltr"
+                      placeholder="#6366F1"
+                    />
+                  </div>
+                  <p className="text-[11px] text-slate-400 leading-snug">
+                    {lang === "ar" ? "كود اللون السداسي (مثل #6366F1)" : "Hex color code (e.g. #6366F1)"}
+                  </p>
+                </div>
+              </div>
+
+              {/* Permissions section in a bordered card */}
+              <div className="rounded-xl border border-slate-200 bg-slate-50/40 overflow-hidden">
+                <div className="flex items-center gap-2 px-4 py-2.5 border-b border-slate-200 bg-white/60">
+                  <Shield size={14} className="text-slate-500" />
+                  <span className="text-xs font-semibold text-slate-700">
+                    {lang === "ar" ? "الأذونات" : "Permissions"}
+                  </span>
+                </div>
+                <div className="p-3">
+                  {editingApp.id !== undefined ? (
+                    <AppPermissionsEditor appId={editingApp.id} />
+                  ) : (
+                    <NewAppPermissionsPicker
+                      selectedIds={editingApp.form.permissionIds}
+                      onChange={(next) =>
+                        setEditingApp({
+                          ...editingApp,
+                          form: { ...editingApp.form, permissionIds: next },
+                        })
+                      }
+                    />
+                  )}
+                </div>
+              </div>
+
+              {editingApp.id !== undefined && (
+                <PermissionAuditHistory
+                  targetKind="app"
+                  targetId={editingApp.id}
+                  enabled={true}
+                  language={lang}
+                  scopeI18nKey="admin.apps.history"
+                  changeKindLabel={null}
+                  labelResolver={(_ck, id) => {
+                    const p = (permissionsList ?? []).find((x) => x.id === id);
+                    return p ? p.name : `#${id}`;
+                  }}
+                />
+              )}
+              {editingApp.id !== undefined && (
+                <RecentActivityForTarget
+                  targetType="app"
+                  targetId={editingApp.id}
+                  enabled={true}
+                  lang={lang}
+                  onViewFullHistory={() =>
+                    openAuditLogForTarget("app", editingApp.id!)
+                  }
+                />
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex gap-2 px-5 sm:px-6 py-4 border-t border-slate-100 bg-slate-50/40">
+              <Button
+                variant="outline"
+                className="flex-1 h-10 rounded-lg border-slate-200 hover:bg-slate-100"
+                onClick={() => setEditingApp(null)}
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button
+                className="flex-1 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 shadow-md shadow-indigo-500/20"
+                onClick={handleSaveApp}
+              >
+                {t("common.save")}
+              </Button>
             </div>
           </div>
         </div>
-      )}
+        );
+      })()}
 
       {/* Edit Service Modal */}
       {editingService && (