diff --git a/artifacts/tx-os/src/pages/admin.tsx b/artifacts/tx-os/src/pages/admin.tsx
index d738ec0c..7ea915a9 100644
--- a/artifacts/tx-os/src/pages/admin.tsx
+++ b/artifacts/tx-os/src/pages/admin.tsx
@@ -138,7 +138,7 @@ 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 } 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 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -1256,60 +1256,141 @@ export default function AdminPage() {
 
       {/* Edit Service Modal */}
       {editingService && (
-        <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">
-              {editingService.id ? t("admin.editService") : t("admin.addService")}
-            </h2>
-            {(
-              [
-                { field: "nameAr", label: t("admin.serviceNameAr") },
-                { field: "nameEn", label: t("admin.serviceNameEn") },
-              ] as { field: keyof ServiceForm; label: string }[]
-            ).map(({ field, label }) => (
-              <div key={field} className="space-y-1">
-                <Label>{label}</Label>
-                <Input
-                  value={String(editingService.form[field])}
-                  onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.form, [field]: e.target.value } })}
-                  className="bg-white/70 border-slate-200"
+        <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) setEditingService(null); }}
+        >
+          <div className="bg-white rounded-2xl w-full max-w-lg 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-4 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 bg-gradient-to-br from-indigo-500 to-blue-600 text-white flex items-center justify-center shadow-md shadow-indigo-500/20">
+                  <Coffee size={18} />
+                </div>
+                <div className="min-w-0">
+                  <h2 className="font-semibold text-slate-900 text-base leading-tight">
+                    {editingService.id ? t("admin.editService") : t("admin.addService")}
+                  </h2>
+                  <p className="text-xs text-slate-500 mt-0.5">
+                    {editingService.id
+                      ? (lang === "ar" ? "حدّث تفاصيل الخدمة وصورتها" : "Update the service details and image")
+                      : (lang === "ar" ? "أضف خدمة جديدة إلى القائمة" : "Add a new service to the list")}
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setEditingService(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-6 py-5 space-y-5">
+              {/* Name fields — side by side on sm+ */}
+              <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.serviceNameAr")}
+                  </Label>
+                  <Input
+                    value={editingService.form.nameAr}
+                    onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.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.serviceNameEn")}
+                  </Label>
+                  <Input
+                    value={editingService.form.nameEn}
+                    onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.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="Tea"
+                  />
+                </div>
+              </div>
+
+              {/* Image */}
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
+                  <ImageIcon size={12} className="text-slate-500" />
+                  {t("admin.serviceImage")}
+                </Label>
+                <ServiceImageUploader
+                  value={editingService.form.imageUrl}
+                  onChange={(url) =>
+                    setEditingService({
+                      ...editingService,
+                      form: { ...editingService.form, imageUrl: url },
+                    })
+                  }
                 />
               </div>
-            ))}
 
-            <div className="space-y-2">
-              <Label>{t("admin.serviceImage")}</Label>
-              <ServiceImageUploader
-                value={editingService.form.imageUrl}
-                onChange={(url) =>
-                  setEditingService({
-                    ...editingService,
-                    form: { ...editingService.form, imageUrl: url },
-                  })
-                }
-              />
+              {/* Availability — card row */}
+              <div className="flex items-center gap-3 p-3.5 rounded-xl border border-slate-200 bg-slate-50/50">
+                <div className={cn(
+                  "shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors",
+                  editingService.form.isAvailable
+                    ? "bg-emerald-100 text-emerald-600"
+                    : "bg-slate-200 text-slate-400"
+                )}>
+                  <Power size={16} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-slate-800">{t("admin.serviceAvailable")}</div>
+                  <div className="text-xs text-slate-500 mt-0.5">
+                    {editingService.form.isAvailable
+                      ? (lang === "ar" ? "الخدمة معروضة للمستخدمين الآن" : "Visible to users right now")
+                      : (lang === "ar" ? "الخدمة مخفية عن المستخدمين" : "Hidden from users")}
+                  </div>
+                </div>
+                <Switch
+                  checked={editingService.form.isAvailable}
+                  onCheckedChange={(v) => setEditingService({ ...editingService, form: { ...editingService.form, isAvailable: v } })}
+                />
+              </div>
+
+              {editingService.id !== undefined && (
+                <div className="pt-1">
+                  <RecentActivityForTarget
+                    targetType="service"
+                    targetId={editingService.id}
+                    enabled={true}
+                    lang={lang}
+                    onViewFullHistory={() =>
+                      openAuditLogForTarget("service", editingService.id!)
+                    }
+                  />
+                </div>
+              )}
             </div>
-            <div className="flex items-center justify-between">
-              <Label>{t("admin.serviceAvailable")}</Label>
-              <Switch
-                checked={editingService.form.isAvailable}
-                onCheckedChange={(v) => setEditingService({ ...editingService, form: { ...editingService.form, isAvailable: v } })}
-              />
-            </div>
-            {editingService.id !== undefined && (
-              <RecentActivityForTarget
-                targetType="service"
-                targetId={editingService.id}
-                enabled={true}
-                lang={lang}
-                onViewFullHistory={() =>
-                  openAuditLogForTarget("service", editingService.id!)
-                }
-              />
-            )}
-            <div className="flex gap-2">
-              <Button variant="outline" className="flex-1" onClick={() => setEditingService(null)}>{t("common.cancel")}</Button>
-              <Button className="flex-1" onClick={handleSaveService}>{t("common.save")}</Button>
+
+            {/* Footer */}
+            <div className="flex gap-2 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={() => setEditingService(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={handleSaveService}
+              >
+                {t("common.save")}
+              </Button>
             </div>
           </div>
         </div>
diff --git a/attached_assets/image_1778577898945.png b/attached_assets/image_1778577898945.png
new file mode 100644
index 00000000..bec50758
Binary files /dev/null and b/attached_assets/image_1778577898945.png differ