diff --git a/Backend/src/NexusRMM.Api/Controllers/AgentsController.cs b/Backend/src/NexusRMM.Api/Controllers/AgentsController.cs
index b776da6..817ea31 100644
--- a/Backend/src/NexusRMM.Api/Controllers/AgentsController.cs
+++ b/Backend/src/NexusRMM.Api/Controllers/AgentsController.cs
@@ -16,7 +16,7 @@ public class AgentsController : ControllerBase
     {
         var agents = await _db.Agents
             .OrderBy(a => a.Hostname)
-            .Select(a => new { a.Id, a.Hostname, a.OsType, a.OsVersion, a.IpAddress, a.Status, a.AgentVersion, a.LastSeen, a.Tags })
+            .Select(a => new { a.Id, a.Hostname, a.OsType, a.OsVersion, a.IpAddress, a.MacAddress, a.Status, a.AgentVersion, a.LastSeen, a.EnrolledAt, a.Tags })
             .ToListAsync();
         return Ok(agents);
     }
@@ -29,14 +29,13 @@ public class AgentsController : ControllerBase
     }
 
     [HttpGet("{id:guid}/metrics")]
-    public async Task<IActionResult> GetMetrics(Guid id, [FromQuery] int hours = 24)
+    public async Task<IActionResult> GetMetrics(Guid id, [FromQuery] int limit = 100)
     {
-        var since = DateTime.UtcNow.AddHours(-hours);
         var metrics = await _db.AgentMetrics
-            .Where(m => m.AgentId == id && m.Timestamp >= since)
+            .Where(m => m.AgentId == id)
             .OrderByDescending(m => m.Timestamp)
-            .Take(1000)
-            .Select(m => new { m.Timestamp, m.Metrics })
+            .Take(limit)
+            .Select(m => new { m.Id, m.AgentId, m.Timestamp, m.Metrics })
             .ToListAsync();
         return Ok(metrics);
     }
diff --git a/Backend/src/NexusRMM.Api/Controllers/TasksController.cs b/Backend/src/NexusRMM.Api/Controllers/TasksController.cs
index c5280e7..018e677 100644
--- a/Backend/src/NexusRMM.Api/Controllers/TasksController.cs
+++ b/Backend/src/NexusRMM.Api/Controllers/TasksController.cs
@@ -29,23 +29,21 @@ public class TasksController : ControllerBase
         return CreatedAtAction(nameof(GetById), new { id = task.Id }, task);
     }
 
+    [HttpGet]
+    public async Task<IActionResult> GetAll([FromQuery] Guid? agentId = null)
+    {
+        var query = _db.Tasks.AsQueryable();
+        if (agentId.HasValue) query = query.Where(t => t.AgentId == agentId.Value);
+        var tasks = await query.OrderByDescending(t => t.CreatedAt).Take(50).ToListAsync();
+        return Ok(tasks);
+    }
+
     [HttpGet("{id:guid}")]
     public async Task<IActionResult> GetById(Guid id)
     {
         var task = await _db.Tasks.FindAsync(id);
         return task is null ? NotFound() : Ok(task);
     }
-
-    [HttpGet("agent/{agentId:guid}")]
-    public async Task<IActionResult> GetByAgent(Guid agentId)
-    {
-        var tasks = await _db.Tasks
-            .Where(t => t.AgentId == agentId)
-            .OrderByDescending(t => t.CreatedAt)
-            .Take(50)
-            .ToListAsync();
-        return Ok(tasks);
-    }
 }
 
 public record CreateTaskRequest(Guid AgentId, TaskType Type, object? Payload);
diff --git a/Backend/src/NexusRMM.Api/Program.cs b/Backend/src/NexusRMM.Api/Program.cs
index fccd90e..63c6893 100644
--- a/Backend/src/NexusRMM.Api/Program.cs
+++ b/Backend/src/NexusRMM.Api/Program.cs
@@ -20,7 +20,12 @@ builder.Services.AddDbContext<RmmDbContext>(options =>
 
 builder.Services.AddGrpc();
 builder.Services.AddSignalR();
-builder.Services.AddControllers();
+builder.Services.AddControllers()
+    .AddJsonOptions(options =>
+    {
+        options.JsonSerializerOptions.PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.CamelCase;
+        options.JsonSerializerOptions.Converters.Add(new System.Text.Json.Serialization.JsonStringEnumConverter());
+    });
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();
 
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index df0606e..fcce6c0 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -33,4 +33,9 @@
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
   }
+  /* Dropdown-Optionen im Dark Mode sichtbar machen */
+  select option {
+    background-color: hsl(var(--card));
+    color: hsl(var(--foreground));
+  }
 }
diff --git a/Frontend/src/pages/SoftwarePage.tsx b/Frontend/src/pages/SoftwarePage.tsx
index 58c3f40..5b00b54 100644
--- a/Frontend/src/pages/SoftwarePage.tsx
+++ b/Frontend/src/pages/SoftwarePage.tsx
@@ -15,13 +15,11 @@ export default function SoftwarePage() {
 
   const queryClient = useQueryClient()
 
-  // Fetch packages
   const { data: packages = [], isLoading } = useQuery({
     queryKey: ['software-packages', filterOs],
     queryFn: () => softwarePackagesApi.list(filterOs === 'All' ? undefined : filterOs),
   })
 
-  // Mutations
   const createMutation = useMutation({
     mutationFn: (data: CreateSoftwarePackageRequest) => softwarePackagesApi.create(data),
     onSuccess: () => {
@@ -96,134 +94,134 @@ export default function SoftwarePage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 p-8">
-      <div className="max-w-7xl mx-auto">
-        {/* Header */}
-        <div className="mb-8">
-          <div className="flex items-center gap-3 mb-2">
-            <Package className="text-blue-600" size={28} />
-            <h1 className="text-3xl font-bold">Software-Verwaltung</h1>
-          </div>
-          <p className="text-gray-600">Verwalte Software-Pakete und deploye sie auf Agenten</p>
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div>
+        <div className="flex items-center gap-3 mb-1">
+          <Package className="text-primary" size={24} />
+          <h1 className="text-3xl font-bold text-foreground">Software-Verwaltung</h1>
         </div>
+        <p className="text-muted-foreground">Verwalte Software-Pakete und deploye sie auf Agenten</p>
+      </div>
 
-        {/* Tabs */}
-        <div className="flex gap-4 mb-6 border-b">
-          <button
-            onClick={() => setActiveTab('catalog')}
-            className={cn(
-              'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
-              activeTab === 'catalog'
-                ? 'border-blue-600 text-blue-600'
-                : 'border-transparent text-gray-600 hover:text-gray-900'
-            )}
-          >
-            Katalog
-          </button>
-          <button
-            onClick={() => setActiveTab('deploy')}
-            className={cn(
-              'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
-              activeTab === 'deploy'
-                ? 'border-blue-600 text-blue-600'
-                : 'border-transparent text-gray-600 hover:text-gray-900'
-            )}
-          >
-            Deployen
-          </button>
+      {/* Tabs */}
+      <div className="flex gap-2 border-b border-border">
+        <button
+          onClick={() => setActiveTab('catalog')}
+          className={cn(
+            'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
+            activeTab === 'catalog'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          )}
+        >
+          Katalog
+        </button>
+        <button
+          onClick={() => setActiveTab('deploy')}
+          className={cn(
+            'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
+            activeTab === 'deploy'
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          )}
+        >
+          Deployen
+        </button>
+      </div>
+
+      {/* Messages */}
+      {successMessage && (
+        <div className="p-3 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg">
+          {successMessage}
         </div>
+      )}
+      {errorMessage && (
+        <div className="p-3 bg-red-500/20 text-red-400 border border-red-500/30 rounded-lg">
+          {errorMessage}
+        </div>
+      )}
 
-        {/* Messages */}
-        {successMessage && (
-          <div className="mb-4 p-3 bg-green-100 text-green-800 rounded-lg">{successMessage}</div>
-        )}
-        {errorMessage && (
-          <div className="mb-4 p-3 bg-red-100 text-red-800 rounded-lg">{errorMessage}</div>
-        )}
-
-        {/* Tab Content */}
-        {activeTab === 'catalog' && (
-          <div>
-            {/* Filter and Create Button */}
-            <div className="flex items-center justify-between mb-6">
-              <div className="flex gap-2">
-                {(['All', 'Windows', 'Linux'] as const).map((os) => (
-                  <button
-                    key={os}
-                    onClick={() => setFilterOs(os)}
-                    className={cn(
-                      'px-4 py-2 rounded-lg font-medium transition-colors',
-                      filterOs === os
-                        ? 'bg-blue-600 text-white'
-                        : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
-                    )}
-                  >
-                    {os}
-                  </button>
-                ))}
-              </div>
-              <button
-                onClick={handleOpenCreate}
-                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-              >
-                <Plus size={18} />
-                Neues Paket
-              </button>
+      {/* Catalog Tab */}
+      {activeTab === 'catalog' && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex gap-2">
+              {(['All', 'Windows', 'Linux'] as const).map((os) => (
+                <button
+                  key={os}
+                  onClick={() => setFilterOs(os)}
+                  className={cn(
+                    'px-4 py-2 rounded-lg font-medium text-sm transition-colors',
+                    filterOs === os
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-muted-foreground hover:text-foreground hover:bg-muted/80'
+                  )}
+                >
+                  {os}
+                </button>
+              ))}
             </div>
+            <button
+              onClick={handleOpenCreate}
+              className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium"
+            >
+              <Plus size={18} />
+              Neues Paket
+            </button>
+          </div>
 
-            {/* Table */}
-            {isLoading ? (
-              <div className="text-center py-8 text-gray-500">Laden...</div>
-            ) : packages.length === 0 ? (
-              <div className="text-center py-8 text-gray-500">
-                Keine Pakete {filterOs !== 'All' && `für ${filterOs}`} vorhanden
-              </div>
-            ) : (
-              <div className="bg-white rounded-lg shadow overflow-x-auto">
-                <table className="w-full">
-                  <thead className="bg-gray-100 border-b">
+          {isLoading ? (
+            <div className="text-center py-8 text-muted-foreground">Laden...</div>
+          ) : packages.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              Keine Pakete {filterOs !== 'All' && `für ${filterOs}`} vorhanden
+            </div>
+          ) : (
+            <div className="bg-card border border-border rounded-lg overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted border-b border-border">
                     <tr>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Name</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Version</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">OS</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
-                        Paketmanager
-                      </th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Paketname</th>
-                      <th className="px-6 py-3 text-right text-sm font-semibold text-gray-900">Aktionen</th>
+                      <th className="px-6 py-3 text-left font-semibold text-foreground">Name</th>
+                      <th className="px-6 py-3 text-left font-semibold text-foreground">Version</th>
+                      <th className="px-6 py-3 text-left font-semibold text-foreground">OS</th>
+                      <th className="px-6 py-3 text-left font-semibold text-foreground">Paketmanager</th>
+                      <th className="px-6 py-3 text-left font-semibold text-foreground">Paketname</th>
+                      <th className="px-6 py-3 text-right font-semibold text-foreground">Aktionen</th>
                     </tr>
                   </thead>
-                  <tbody>
+                  <tbody className="divide-y divide-border">
                     {packages.map((pkg) => (
-                      <tr key={pkg.id} className="border-b hover:bg-gray-50 transition-colors">
-                        <td className="px-6 py-4 font-medium text-gray-900">{pkg.name}</td>
-                        <td className="px-6 py-4 text-gray-600">{pkg.version}</td>
+                      <tr key={pkg.id} className="hover:bg-muted/50 transition-colors">
+                        <td className="px-6 py-4 font-medium text-foreground">{pkg.name}</td>
+                        <td className="px-6 py-4 text-muted-foreground">{pkg.version}</td>
                         <td className="px-6 py-4">
                           <span
                             className={cn(
-                              'px-3 py-1 rounded-full text-sm font-medium text-white',
+                              'px-3 py-1 rounded-full text-xs font-medium text-primary-foreground',
                               pkg.osType === 'Windows' ? 'bg-blue-600' : 'bg-green-600'
                             )}
                           >
                             {pkg.osType}
                           </span>
                         </td>
-                        <td className="px-6 py-4 text-gray-600">{pkg.packageManager}</td>
-                        <td className="px-6 py-4 text-gray-600 font-mono text-sm">{pkg.packageName}</td>
-                        <td className="px-6 py-4 flex justify-end gap-3">
+                        <td className="px-6 py-4 text-muted-foreground">{pkg.packageManager}</td>
+                        <td className="px-6 py-4 text-muted-foreground font-mono text-xs">{pkg.packageName}</td>
+                        <td className="px-6 py-4 flex justify-end gap-2">
                           <button
                             onClick={() => handleEdit(pkg)}
-                            className="p-2 text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                            className="p-2 text-primary hover:bg-primary/10 rounded transition-colors"
                             title="Bearbeiten"
                           >
-                            <Edit size={18} />
+                            <Edit size={16} />
                           </button>
                           <button
                             onClick={() => handleDelete(pkg.id, pkg.name)}
-                            className="p-2 text-red-600 hover:bg-red-50 rounded transition-colors"
+                            className="p-2 text-red-400 hover:bg-red-500/10 rounded transition-colors"
                             title="Löschen"
                           >
-                            <Trash2 size={18} />
+                            <Trash2 size={16} />
                           </button>
                         </td>
                       </tr>
@@ -231,12 +229,12 @@ export default function SoftwarePage() {
                   </tbody>
                 </table>
               </div>
-            )}
-          </div>
-        )}
+            </div>
+          )}
+        </div>
+      )}
 
-        {activeTab === 'deploy' && <DeployTab packages={packages} deployMutation={deployMutation} />}
-      </div>
+      {activeTab === 'deploy' && <DeployTab packages={packages} deployMutation={deployMutation} />}
 
       {/* Create/Edit Modal */}
       {isCreateModalOpen && (
@@ -316,76 +314,72 @@ function CreatePackageModal({
       availableManagers.includes(formData.packageManager as PackageManager)
         ? (formData.packageManager as PackageManager)
         : (availableManagers[0] as PackageManager)
-
-    setFormData((prev) => ({
-      ...prev,
-      osType: newOs,
-      packageManager: newManager,
-    }))
+    setFormData((prev) => ({ ...prev, osType: newOs, packageManager: newManager }))
   }
 
+  const inputClass =
+    'w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary'
+
   if (!isOpen) return null
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-6 border-b sticky top-0 bg-white">
-          <h2 className="text-xl font-bold">
+      <div className="bg-card border border-border rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b border-border sticky top-0 bg-card">
+          <h2 className="text-xl font-bold text-foreground">
             {editingPackage ? 'Paket bearbeiten' : 'Neues Paket'}
           </h2>
-          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
-            <X size={24} />
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
+            <X size={20} />
           </button>
         </div>
 
         <form onSubmit={handleSubmit} className="p-6 space-y-4">
-          {/* Name */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-1">Name *</label>
+            <label className="block text-sm font-medium text-foreground mb-1">Name *</label>
             <input
               type="text"
               required
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className={inputClass}
             />
           </div>
 
-          {/* Version */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-1">Version *</label>
+            <label className="block text-sm font-medium text-foreground mb-1">Version *</label>
             <input
               type="text"
               required
               placeholder="z.B. 1.0.0"
               value={formData.version}
               onChange={(e) => setFormData({ ...formData, version: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className={inputClass}
             />
           </div>
 
-          {/* OS */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-1">Betriebssystem *</label>
+            <label className="block text-sm font-medium text-foreground mb-1">Betriebssystem *</label>
             <select
               required
               value={formData.osType}
               onChange={(e) => handleOsChange(e.target.value as OsType)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className={inputClass}
             >
               <option value="Windows">Windows</option>
               <option value="Linux">Linux</option>
             </select>
           </div>
 
-          {/* Package Manager */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-1">Paketmanager *</label>
+            <label className="block text-sm font-medium text-foreground mb-1">Paketmanager *</label>
             <select
               required
               value={formData.packageManager}
-              onChange={(e) => setFormData({ ...formData, packageManager: e.target.value as PackageManager })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onChange={(e) =>
+                setFormData({ ...formData, packageManager: e.target.value as PackageManager })
+              }
+              className={inputClass}
             >
               {getAvailablePackageManagers().map((pm) => (
                 <option key={pm} value={pm}>
@@ -395,74 +389,71 @@ function CreatePackageModal({
             </select>
           </div>
 
-          {/* Package Name */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-1">Paketname *</label>
+            <label className="block text-sm font-medium text-foreground mb-1">Paketname *</label>
             <input
               type="text"
               required
               placeholder="Name wie im Paketmanager"
               value={formData.packageName}
               onChange={(e) => setFormData({ ...formData, packageName: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className={inputClass}
             />
           </div>
 
-          {/* Installer URL (nur für "direct") */}
           {formData.packageManager === 'direct' && (
-            <div>
-              <label className="block text-sm font-medium text-gray-900 mb-1">Installer URL</label>
-              <input
-                type="url"
-                placeholder="https://..."
-                value={formData.installerUrl || ''}
-                onChange={(e) => setFormData({ ...formData, installerUrl: e.target.value || undefined })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
+            <>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">Installer URL</label>
+                <input
+                  type="url"
+                  placeholder="https://..."
+                  value={formData.installerUrl || ''}
+                  onChange={(e) =>
+                    setFormData({ ...formData, installerUrl: e.target.value || undefined })
+                  }
+                  className={inputClass}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">SHA256-Prüfsumme</label>
+                <input
+                  type="text"
+                  placeholder="SHA256 hash"
+                  value={formData.checksum || ''}
+                  onChange={(e) =>
+                    setFormData({ ...formData, checksum: e.target.value || undefined })
+                  }
+                  className={cn(inputClass, 'font-mono text-xs')}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-1">Silent-Argumente</label>
+                <input
+                  type="text"
+                  placeholder="/S, --silent, etc."
+                  value={formData.silentArgs || ''}
+                  onChange={(e) =>
+                    setFormData({ ...formData, silentArgs: e.target.value || undefined })
+                  }
+                  className={inputClass}
+                />
+              </div>
+            </>
           )}
 
-          {/* Checksum (nur für "direct") */}
-          {formData.packageManager === 'direct' && (
-            <div>
-              <label className="block text-sm font-medium text-gray-900 mb-1">SHA256-Prüfsumme</label>
-              <input
-                type="text"
-                placeholder="SHA256 hash"
-                value={formData.checksum || ''}
-                onChange={(e) => setFormData({ ...formData, checksum: e.target.value || undefined })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-xs"
-              />
-            </div>
-          )}
-
-          {/* Silent Args (nur für "direct") */}
-          {formData.packageManager === 'direct' && (
-            <div>
-              <label className="block text-sm font-medium text-gray-900 mb-1">Silent-Argumente</label>
-              <input
-                type="text"
-                placeholder="/S, --silent, etc."
-                value={formData.silentArgs || ''}
-                onChange={(e) => setFormData({ ...formData, silentArgs: e.target.value || undefined })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              />
-            </div>
-          )}
-
-          {/* Buttons */}
           <div className="flex gap-3 pt-4">
             <button
               type="button"
               onClick={onClose}
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium"
+              className="flex-1 px-4 py-2 border border-border rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors font-medium text-sm"
             >
               Abbrechen
             </button>
             <button
               type="submit"
               disabled={isLoading}
-              className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50"
+              className="flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm disabled:opacity-50"
             >
               {isLoading ? 'Speichern...' : editingPackage ? 'Aktualisieren' : 'Erstellen'}
             </button>
@@ -475,7 +466,7 @@ function CreatePackageModal({
 
 interface DeployTabProps {
   packages: SoftwarePackage[]
-  deployMutation: any
+  deployMutation: ReturnType<typeof useMutation<unknown, Error, { agentId: string; packageId: number; action: 'install' | 'uninstall' }>>
 }
 
 function DeployTab({ packages, deployMutation }: DeployTabProps) {
@@ -483,28 +474,26 @@ function DeployTab({ packages, deployMutation }: DeployTabProps) {
   const [agentId, setAgentId] = useState('')
   const [action, setAction] = useState<'install' | 'uninstall'>('install')
 
+  const inputClass =
+    'w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary'
+
   const handleDeploy = (e: React.FormEvent) => {
     e.preventDefault()
     if (!selectedPackageId || !agentId) return
-    deployMutation.mutate({
-      agentId,
-      packageId: selectedPackageId as number,
-      action,
-    })
+    deployMutation.mutate({ agentId, packageId: selectedPackageId as number, action })
   }
 
   return (
     <div className="max-w-lg">
-      <div className="bg-white rounded-lg shadow p-6">
+      <div className="bg-card border border-border rounded-lg p-6">
         <form onSubmit={handleDeploy} className="space-y-4">
-          {/* Package Selection */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-2">Paket auswählen *</label>
+            <label className="block text-sm font-medium text-foreground mb-2">Paket auswählen *</label>
             <select
               required
               value={selectedPackageId}
               onChange={(e) => setSelectedPackageId(e.target.value ? Number(e.target.value) : '')}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className={inputClass}
             >
               <option value="">-- Paket auswählen --</option>
               {packages.map((pkg) => (
@@ -515,65 +504,54 @@ function DeployTab({ packages, deployMutation }: DeployTabProps) {
             </select>
           </div>
 
-          {/* Agent ID */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-2">Agent-ID *</label>
+            <label className="block text-sm font-medium text-foreground mb-2">Agent-ID *</label>
             <input
               type="text"
               required
               placeholder="UUID des Agenten (aus Dashboard kopieren)"
               value={agentId}
               onChange={(e) => setAgentId(e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+              className={cn(inputClass, 'font-mono')}
             />
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="mt-1 text-xs text-muted-foreground">
               Finde die Agent-ID im Agent-Dashboard oder Agent-Details
             </p>
           </div>
 
-          {/* Action */}
           <div>
-            <label className="block text-sm font-medium text-gray-900 mb-2">Aktion *</label>
+            <label className="block text-sm font-medium text-foreground mb-2">Aktion *</label>
             <div className="space-y-2">
-              <label className="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="radio"
-                  name="action"
-                  value="install"
-                  checked={action === 'install'}
-                  onChange={() => setAction('install')}
-                  className="w-4 h-4"
-                />
-                <span className="text-gray-900">Installieren</span>
-              </label>
-              <label className="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="radio"
-                  name="action"
-                  value="uninstall"
-                  checked={action === 'uninstall'}
-                  onChange={() => setAction('uninstall')}
-                  className="w-4 h-4"
-                />
-                <span className="text-gray-900">Deinstallieren</span>
-              </label>
+              {(['install', 'uninstall'] as const).map((a) => (
+                <label key={a} className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="radio"
+                    name="action"
+                    value={a}
+                    checked={action === a}
+                    onChange={() => setAction(a)}
+                    className="w-4 h-4 accent-primary"
+                  />
+                  <span className="text-foreground text-sm">
+                    {a === 'install' ? 'Installieren' : 'Deinstallieren'}
+                  </span>
+                </label>
+              ))}
             </div>
           </div>
 
-          {/* Submit */}
           <button
             type="submit"
             disabled={deployMutation.isPending || !selectedPackageId || !agentId}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <Rocket size={18} />
             {deployMutation.isPending ? 'Wird deployed...' : 'Deploy starten'}
           </button>
 
-          {/* Info */}
-          <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-900">
+          <div className="p-3 bg-primary/10 border border-primary/20 rounded-lg text-sm text-foreground">
             <p className="font-medium mb-1">Hinweis:</p>
-            <p>
+            <p className="text-muted-foreground">
               Die Task wird erstellt und der Agent führt sie beim nächsten Heartbeat aus (ca. 1-2 Minuten).
               Überwache den Task-Fortschritt im Agent-Dashboard.
             </p>