diff --git a/app/layout.tsx b/app/layout.tsx
index d0331f2..6af2c1f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -21,6 +21,22 @@ const orbitron = Orbitron({
 export const metadata: Metadata = {
   title: "ZIMZ – Agent Control",
   description: "ZIMZ: Multi-Agent Dashboard for OpenClaw",
+  manifest: "/manifest.json",
+  icons: {
+    icon: [
+      { url: "/favicon.svg", type: "image/svg+xml" },
+      { url: "/icon-512.png", sizes: "512x512", type: "image/png" },
+    ],
+    apple: "/apple-touch-icon.png",
+  },
+  appleWebApp: {
+    capable: true,
+    title: "ZIMZ",
+    statusBarStyle: "black-translucent",
+  },
+  other: {
+    "mobile-web-app-capable": "yes",
+  },
 };
 
 export default function RootLayout({
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..9436b55
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..c0cb356
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#06b6d4"/>
+      <stop offset="100%" stop-color="#22d3ee"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="6" fill="#0f172a"/>
+  <path d="M7 8h18l-7 7h7l-18 9 7-8H7z" fill="url(#g)"/>
+</svg>
diff --git a/public/icon-512.png b/public/icon-512.png
new file mode 100644
index 0000000..9436b55
Binary files /dev/null and b/public/icon-512.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..46265bf
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,23 @@
+{
+  "name": "ZIMZ – Agent Control",
+  "short_name": "ZIMZ",
+  "description": "Multi-Agent Dashboard for OpenClaw",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#030712",
+  "theme_color": "#0891b2",
+  "icons": [
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/src/components/TasksView.tsx b/src/components/TasksView.tsx
index 6e34d6e..d51d433 100644
--- a/src/components/TasksView.tsx
+++ b/src/components/TasksView.tsx
@@ -547,7 +547,7 @@ export default function TasksView({ agents }: TasksViewProps) {
           exit={{ opacity: 0, y: -8, scale: 0.97 }}
           transition={{ duration: 0.24, ease: "easeOut" }}
         >
-          <div className="relative w-full max-w-2xl rounded-2xl border border-cyan-300/35 bg-slate-950/95 p-6 shadow-[0_14px_50px_rgba(4,12,28,0.85)] backdrop-blur">
+          <div className="relative w-full max-w-2xl rounded-2xl border border-cyan-300/35 bg-slate-950/95 p-4 shadow-[0_14px_50px_rgba(4,12,28,0.85)] backdrop-blur md:p-6">
             <div className="mb-5 flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <CalendarClock className="h-4 w-4 text-cyan-300" />
@@ -580,7 +580,7 @@ export default function TasksView({ agents }: TasksViewProps) {
                 )}
               </label>
 
-              <div className="grid gap-3 md:grid-cols-2">
+              <div className="grid grid-cols-2 gap-3">
                 <label className="block text-xs text-slate-300">
                   Cron Expression
                   <div className="mt-1 flex gap-2">
@@ -635,7 +635,7 @@ export default function TasksView({ agents }: TasksViewProps) {
                 </label>
               </div>
 
-              <div className="grid gap-3 md:grid-cols-3">
+              <div className="grid grid-cols-3 gap-2 md:gap-3">
                 <label className="block text-xs text-slate-300">
                   Session Target
                   <select
@@ -643,7 +643,7 @@ export default function TasksView({ agents }: TasksViewProps) {
                     onChange={(event) =>
                       onChange({ sessionTarget: event.target.value as OpenClawSessionTarget })
                     }
-                    className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900/80 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-500/60 focus:ring-1 focus:ring-cyan-500/40"
+                    className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900/80 px-2 py-2 text-xs text-slate-100 outline-none focus:border-cyan-500/60 focus:ring-1 focus:ring-cyan-500/40 md:px-3 md:text-sm"
                   >
                     <option value="isolated">isolated</option>
                     <option value="main">main</option>
@@ -657,7 +657,7 @@ export default function TasksView({ agents }: TasksViewProps) {
                     onChange={(event) =>
                       onChange({ wakeMode: event.target.value as OpenClawWakeMode })
                     }
-                    className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900/80 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-500/60 focus:ring-1 focus:ring-cyan-500/40"
+                    className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900/80 px-2 py-2 text-xs text-slate-100 outline-none focus:border-cyan-500/60 focus:ring-1 focus:ring-cyan-500/40 md:px-3 md:text-sm"
                   >
                     <option value="next-heartbeat">next-heartbeat</option>
                     <option value="now">now</option>
@@ -669,7 +669,7 @@ export default function TasksView({ agents }: TasksViewProps) {
                   <select
                     value={form.agentId}
                     onChange={(event) => onChange({ agentId: event.target.value })}
-                    className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900/80 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-500/60 focus:ring-1 focus:ring-cyan-500/40"
+                    className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900/80 px-2 py-2 text-xs text-slate-100 outline-none focus:border-cyan-500/60 focus:ring-1 focus:ring-cyan-500/40 md:px-3 md:text-sm"
                   >
                     {agents.map((agent) => (
                       <option key={agent.id} value={agent.id}>